:root {
  --bg-start: #eef2f7;
  --bg-end: #d9e2ec;
  --glass-bg: rgba(255, 255, 255, 0.68);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  --panel: #ffffff;
  --panel-2: #f5f7fa;
  --line: #e2e8f0;
  --text: #1a202c;
  --text-secondary: #4a5568;
  --dim: #718096;
  --accent: #6c5ce7;
  --accent-light: #a29bfe;
  --accent-dim: #4a3db8;
  --accent-glow: rgba(108, 92, 231, 0.25);
  --warn: #f6ad55;
  --danger: #fc8181;
  --danger-dim: #c53030;
  --win-radius: 16px;
  --font: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SF Mono", "Cascadia Code", Consolas, monospace;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
img { max-width: 100%; }
body {
  font-family: var(--font);
  background: linear-gradient(145deg, var(--bg-start), var(--bg-end));
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
b { color: var(--accent); }


.fullscreen-layer {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#modal-layer {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 25, 35, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#modal-layer.hidden { display: none; }
#modal-box {
  max-width: 520px; width: calc(100% - 40px);
}
button { font-family: var(--font); cursor: pointer; }
.btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text-secondary);
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.15s ease;
  user-select: none;
}
.btn:hover { border-color: var(--accent); background: #edf2f7; }
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-dim), #2d1b8a);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.btn-danger {
  background: #fff5f5;
  border-color: #feb2b2;
  color: var(--danger-dim);
}
.btn-danger:hover { background: #fed7d7; border-color: var(--danger); }
.btn-lg { padding: 12px 34px; font-size: 16px; border-radius: 12px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }


.boot-inner { text-align: center; }
.boot-logo { font-size: 56px; color: var(--accent); animation: pulse 2s infinite; }
.boot-logo img { width: 104px; height: 104px; border-radius: 24px; box-shadow: 0 12px 36px rgba(108, 92, 231, 0.45), inset 0 1px 0 rgba(255,255,255,0.35); }
@keyframes pulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
.boot-title {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 4px;
  margin-top: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.boot-title span {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 2px;
  -webkit-text-fill-color: var(--dim);
}
.boot-sub { color: var(--dim); margin-top: 8px; font-size: 13px; letter-spacing: 1px; }
.boot-bar {
  width: 320px; height: 4px;
  background: #e2e8f0;
  margin: 32px auto 12px;
  border-radius: 4px;
  overflow: hidden;
}
.boot-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent-light), var(--accent));
  transition: width 0.4s ease;
}
.boot-msg { color: var(--dim); font-size: 12px; font-family: var(--mono); }


.intro-card, .ending-inner, .chapter-inner {
  max-width: 640px; width: 90%;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 48px 52px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  max-height: 94vh;
  overflow-y: auto;
}
.intro-tag, .ending-tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--accent);
  background: var(--accent-glow);
  border-radius: 20px;
  padding: 4px 16px;
  margin-bottom: 18px;
  font-weight: 600;
}
.intro-card h2, .ending-inner h2 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 6px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--text), var(--accent-dim));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.intro-meta { color: var(--dim); font-size: 12px; margin-bottom: 24px; }
.intro-body {
  text-align: left;
  font-size: 14.5px;
  line-height: 2;
  color: var(--text-secondary);
  margin-bottom: 26px;
}
.intro-hint {
  color: var(--dim);
  font-size: 12px;
  margin-bottom: 22px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.intro-device {
  font-size: 12.5px;
  color: #b07d1f;
  margin-bottom: 18px;
  border: 1px dashed rgba(246, 173, 85, 0.55);
  border-radius: 10px;
  padding: 10px 14px;
  background: rgba(246, 173, 85, 0.08);
  line-height: 1.9;
}
.intro-ai { color: var(--dim); font-size: 11px; margin-bottom: 6px; text-align: center; opacity: 0.8; }


#hire-screen { background: rgba(10, 14, 24, 0.82); }
.hire-card {
  max-width: 620px; width: 90%;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 44px 48px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: hire-in .5s ease-out;
}
@keyframes hire-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.hire-tag {
  display: inline-block;
  font-size: 12px; letter-spacing: 3px;
  color: var(--accent); background: var(--accent-glow);
  border-radius: 20px; padding: 4px 16px;
  margin-bottom: 18px; font-weight: 600;
}
.hire-card h2 {
  font-size: 34px; font-weight: 700; letter-spacing: 6px; margin-bottom: 10px;
  background: linear-gradient(135deg, var(--text), var(--accent-dim));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hire-meta { color: var(--dim); font-size: 12px; margin-bottom: 22px; }
.hire-body { text-align: left; font-size: 14.5px; line-height: 2; color: var(--text-secondary); margin-bottom: 24px; }
.hire-quote {
  margin: 14px 0; padding: 12px 18px; border-left: 3px solid var(--accent);
  background: var(--accent-glow); border-radius: 8px;
  font-family: var(--mono); font-size: 13.5px; color: var(--text);
}
.hire-qa {
  display: flex; flex-direction: column; gap: 6px;
  margin: 12px 0 16px; padding: 14px 18px;
  border: 1px dashed var(--line); border-radius: 10px;
  background: rgba(108,92,231,0.04);
}
.hire-qa .hq-q { color: var(--text); font-size: 13.5px; }
.hire-qa .hq-a { color: var(--accent); font-weight: 700; font-size: 14px; letter-spacing: 2px; }
.hire-note { color: var(--dim); font-size: 11.5px; margin-top: 14px; line-height: 1.7; }


#hire-screen { background: rgba(10, 14, 24, 0.82); }
.hire-chat {
  width: 540px; max-width: 94vw; height: 660px; max-height: 78vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: hire-in .45s ease-out;
}
.hc-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: #fff;
  border-bottom: 1px solid #eef0f3; flex-shrink: 0;
}
.hc-back { font-size: 24px; color: #1a202c; cursor: pointer; line-height: 1; padding-right: 2px; }
.hc-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.hc-boss { background: linear-gradient(135deg, #6c5ce7, #a29bfe); }
.hc-me { background: linear-gradient(135deg, #00be6c, #35d98a); }
.hc-avatar.small { width: 34px; height: 34px; font-size: 13px; }
.hc-name { font-size: 16px; font-weight: 700; color: #1a202c; display: flex; gap: 6px; align-items: center; }
.hc-tag { font-size: 10px; background: #00be6c; color: #fff; border-radius: 4px; padding: 1px 6px; font-weight: 600; }
.hc-org { font-size: 11.5px; color: #8a94a6; margin-top: 2px; }
.hc-read { color: #00be6c; }
.hc-messages {
  flex: 1; overflow-y: auto; background: #f5f6f8;
  padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
.hc-ts { align-self: center; font-size: 11px; color: #a7b0bd; margin: 2px 0; }
.hc-row { display: flex; align-items: flex-start; gap: 8px; max-width: 84%; animation: hc-pop .25s ease-out; }
.hc-row.me { align-self: flex-end; flex-direction: row-reverse; }
@keyframes hc-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hc-bubble {
  padding: 10px 13px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.75;
  white-space: pre-line; color: #1a202c; word-break: break-word;
}
.hc-row.boss .hc-bubble { background: #fff; border-top-left-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.hc-row.me .hc-bubble { background: linear-gradient(135deg, #00be6c, #2fce83); color: #fff; border-top-right-radius: 4px; }
.hc-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; background: #fff; border-radius: 12px; border-top-left-radius: 4px; }
.hc-typing i { width: 6px; height: 6px; border-radius: 50%; background: #b8c0cc; animation: hc-blink 1s infinite; }
.hc-typing i:nth-child(2) { animation-delay: .15s; }
.hc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hc-blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.hc-input { padding: 10px 14px 14px; background: #fff; border-top: 1px solid #eef0f3; flex-shrink: 0; }
.hc-input-bar {
  display: flex; align-items: center; gap: 8px;
  background: #f5f6f8; border-radius: 20px;
  padding: 9px 14px; font-size: 13px; color: #8a94a6;
}
.hc-sent { color: #00be6c; font-weight: 600; }
.hc-action { margin-top: 10px; display: flex; justify-content: center; }

.hc-resume { border: 1px solid #e4e8ef; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.hc-resume .hr-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 13.5px; font-weight: 700; color: #1a202c; cursor: pointer; user-select: none; }
.hc-resume .hr-fold { color: #8a94a6; font-size: 12px; transition: transform .2s; }
.hc-resume.folded .hr-fold { transform: rotate(-90deg); }
.hc-resume.folded .hr-body { display: none; }
.hc-resume .hr-body { padding: 0 14px 12px; }
.hc-resume .hr-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12.5px; color: #4a5568; border-top: 1px dashed #eef0f3; }
.hc-resume .hr-row:first-child { border-top: none; }
.hc-resume .hr-row b { color: #1a202c; font-weight: 600; text-align: right; }

.hire-card-wrap {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 14, 24, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: hire-in .4s ease-out;
}
.hire-card-wrap.hidden { display: none; }
.hire-card-wrap .hire-card { animation: none; }


.hc-resume-bar {
  flex-shrink: 0;
  background: #fafbfc;
  border-bottom: 1px solid #eef0f3;
  font-size: 12px;
}
.hc-resume-bar .hrb-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; cursor: pointer; user-select: none;
  color: #4a5568; font-weight: 600;
}
.hc-resume-bar .hrb-name { color: #00be6c; font-weight: 700; }
.hc-resume-bar .hrb-fold { color: #8a94a6; font-size: 11px; transition: transform .2s; }
.hc-resume-bar.folded .hrb-fold { transform: rotate(-90deg); }
.hc-resume-bar.folded .hrb-body { display: none; }
.hc-resume-bar .hrb-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px;
  padding: 0 16px 10px;
}
.hc-resume-bar .hr-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 3px 0; font-size: 11.5px; color: #8a94a6;
}
.hc-resume-bar .hr-row b { color: #1a202c; font-weight: 600; text-align: right; }


.hc-choices { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.hc-choice {
  width: 100%; text-align: left; justify-content: flex-start;
  background: #f5f6f8; border: 1px solid #e4e8ef; color: #1a202c;
  border-radius: 10px; padding: 9px 14px; font-size: 13px; line-height: 1.5;
  transition: all .15s;
}
.hc-choice:hover { background: #eef8f2; border-color: #00be6c; color: #00563a; }
.diff-row { display: flex; gap: 16px; justify-content: center; margin-bottom: 14px; }
.diff-btn {
  flex: 1; max-width: 220px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 20px; border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--panel);
}
.diff-btn .diff-t { font-size: 16px; font-weight: 700; letter-spacing: 1px; color: var(--text); }
.diff-btn .diff-d { font-size: 12px; opacity: 0.7; font-weight: 400; color: var(--dim); }
.diff-btn:hover { border-color: var(--accent); background: #f7faff; }
.diff-btn.btn-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.diff-btn.btn-primary .diff-t { color: #fff; }
.diff-btn.btn-primary .diff-d { color: rgba(255,255,255,0.8); }
.diff-note { font-size: 12px; color: var(--dim); }
#quick-replay-bar {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed var(--accent-light);
  border-radius: 12px;
  background: rgba(108, 92, 231, 0.06);
}
.qr-note { font-size: 13px; color: var(--text-secondary); line-height: 1.8; display: flex; flex-direction: column; gap: 8px; align-items: center; }


#desktop { position: fixed; inset: 0; }
.desktop-wallpaper {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 1000px 600px at 70% 20%, rgba(108,92,231,0.08), transparent 60%),
    radial-gradient(ellipse 800px 500px at 20% 80%, rgba(56,189,248,0.06), transparent 55%),
    linear-gradient(160deg, #eef2f7 0%, #e2e8f0 100%);
}

.wall-city {
  position: absolute; bottom: 0; left: 0; right: 0; height: 30%;
  background:
    linear-gradient(transparent, rgba(200, 210, 230, 0.3)),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(100, 120, 160, 0.04) 46px 48px, transparent 48px 90px, rgba(100, 120, 160, 0.06) 90px 92px),
    linear-gradient(to top, #c8d2e0 0%, transparent 100%);
}
.wall-city::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 12% 40%, #b8c4d4 0 40%, transparent 60%),
    radial-gradient(2px 2px at 22% 65%, #b8c4d4 0 40%, transparent 60%),
    radial-gradient(2px 2px at 33% 30%, #b8c4d4 0 40%, transparent 60%),
    radial-gradient(2px 2px at 48% 55%, #b8c4d4 0 40%, transparent 60%),
    radial-gradient(2px 2px at 61% 42%, #b8c4d4 0 40%, transparent 60%),
    radial-gradient(2px 2px at 74% 62%, #b8c4d4 0 40%, transparent 60%),
    radial-gradient(2px 2px at 86% 35%, #b8c4d4 0 40%, transparent 60%);
}
.wall-flow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.2;
  background:
    linear-gradient(90deg, transparent 0%, rgba(108,92,231,0.04) 12%, transparent 24%),
    linear-gradient(90deg, transparent 0%, rgba(56,189,248,0.03) 30%, transparent 45%),
    linear-gradient(90deg, transparent 0%, rgba(108,92,231,0.03) 62%, transparent 78%);
  background-size: 700px 100%, 1100px 100%, 900px 100%;
  animation: wall-flow 30s linear infinite;
}
@keyframes wall-flow { 0% { background-position: -700px 0, 1100px 0, -900px 0; } 100% { background-position: 1100px 0, -1100px 0, 900px 0; } }
.desktop-watermark {
  position: absolute; right: 40px; top: 40px; text-align: right; pointer-events: none;
}
.wm-big {
  font-size: 32px;
  letter-spacing: 10px;
  color: rgba(100, 120, 160, 0.15);
  font-weight: 600;
}
.wm-sub {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(100, 120, 160, 0.18);
  font-family: var(--mono);
  margin-top: 4px;
}


#icon-area {
  position: absolute; top: 20px; left: 20px; bottom: 120px;
  display: grid; grid-template-columns: 80px; grid-template-rows: repeat(5, auto);
  grid-auto-flow: column; gap: 8px; align-content: start;
}
.d-icon {
  width: 80px; padding: 8px 2px 6px;
  border-radius: 16px; text-align: center; cursor: pointer;
  transition: transform 0.15s ease;
  background: transparent;
  border: 1px solid transparent;
}
.d-icon:hover { transform: translateY(-4px); background: rgba(255,255,255,0.4); backdrop-filter: blur(8px); border-color: rgba(255,255,255,0.5); }
.d-icon:active { transform: scale(0.94); }
.d-icon .di-glyph {
  width: 54px; height: 54px; margin: 0 auto 6px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--ic), #1a2440);
  background: linear-gradient(155deg, var(--ic), #1a2440);
  background: linear-gradient(155deg, var(--ic), color-mix(in srgb, var(--ic) 68%, #1a2440));
  border: none;
  box-shadow: 0 6px 16px var(--icg), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative;
}
.d-icon .di-glyph svg { width: 28px; height: 28px; display: block; }
.d-icon:hover .di-glyph {
  box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-glow);
  border-color: var(--accent);
}
.d-icon .di-label {
  font-size: 11px; line-height: 1.4; letter-spacing: 0.2px;
  color: var(--text-secondary); text-shadow: 0 1px 2px rgba(255,255,255,0.8);
  font-weight: 500;
}
.d-icon:hover .di-label { color: var(--text); }
.d-icon.has-badge .di-glyph::before {
  content: attr(data-badge);
  position: absolute; top: -6px; right: -8px; z-index: 2;
  min-width: 18px; height: 18px; border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 11px; line-height: 18px; padding: 0 6px;
  font-weight: 600; font-family: var(--font);
  box-shadow: 0 2px 8px rgba(252, 129, 129, 0.4);
}


#objective-panel {
  position: absolute; right: 16px; top: 76px; z-index: 600;
  width: 264px; max-height: calc(100vh - 200px);
  display: flex; flex-direction: column;
  background: rgba(244, 247, 252, 0.72);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 16px;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.6);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
#objective-panel:hover { box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-glow); }
#objective-panel .op-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px 9px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1px; color: var(--text);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(108,92,231,0.08), transparent);
}
#objective-panel .op-arrow { font-size: 11px; color: var(--accent); font-weight: 600; }
#objective-panel .op-current {
  padding: 10px 14px; font-size: 12.5px; line-height: 1.6;
  color: var(--accent); font-weight: 600;
  border-bottom: 1px solid var(--line);
}
#objective-panel .op-list {
  list-style: none; margin: 0; padding: 8px 0;
  overflow-y: auto; flex: 1;
}
#objective-panel .op-list li {
  position: relative; padding: 7px 14px 7px 30px;
  font-size: 11.5px; line-height: 1.5; color: var(--dim);
}
#objective-panel .op-list li::before {
  content: ""; position: absolute; left: 14px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line);
}
#objective-panel .op-list li.done { opacity: 0.5; }
#objective-panel .op-list li.done::before { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.6); }
#objective-panel .op-list li.current { color: var(--text); font-weight: 600; background: rgba(108,92,231,0.08); }
#objective-panel .op-list li.current::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }


#objective-panel .op-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#objective-panel .op-collapse {
  cursor: pointer; font-size: 13px; color: var(--dim);
  padding: 2px 7px; border-radius: 6px; line-height: 1;
  transition: background 0.15s, color 0.15s, transform 0.2s;
  user-select: none;
}
#objective-panel .op-collapse:hover { background: rgba(108,92,231,0.15); color: var(--accent); }
#objective-panel.collapsed { width: 42px; }
#objective-panel.collapsed .op-head {
  flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 0; gap: 8px; border-bottom: none;
  background: none;
}
#objective-panel.collapsed .op-title {
  writing-mode: vertical-rl; letter-spacing: 3px; font-size: 12px;
}
#objective-panel.collapsed .op-arrow { display: none; }
#objective-panel.collapsed .op-current,
#objective-panel.collapsed .op-list { display: none; }
#objective-panel.collapsed .op-collapse { transform: rotate(180deg); }


.obj-list {
  list-style: none; margin: 14px 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.obj-list li {
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.55); font-size: 13.5px; color: var(--text-secondary);
  line-height: 1.6; transition: all 0.15s;
}
.obj-list li:hover { border-color: var(--accent-light); background: rgba(255,255,255,0.85); }
.obj-list li.done { opacity: 0.55; text-decoration: line-through; }
.obj-list li.done::before { content: "✓ "; color: var(--accent); font-weight: 700; text-decoration: none; }
.obj-list li.current {
  border-color: var(--accent-light); background: rgba(108,92,231,0.08);
  color: var(--text); font-weight: 500; box-shadow: 0 0 0 1px var(--accent-glow);
}
.obj-list li.current::before { content: "▶ "; color: var(--accent); font-size: 11px; }


#taskbar {
  position: absolute; left: 14px; right: 14px; bottom: 10px; height: 50px; z-index: 4000;
  display: flex; align-items: center; justify-content: center; padding: 0 12px; gap: 6px;
  background: rgba(244, 247, 252, 0.66);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(31, 38, 55, 0.16), inset 0 1px 0 rgba(255,255,255,0.6);
}
.tb-start {
  padding: 7px 16px; border-radius: 10px; cursor: pointer;
  color: var(--text); font-weight: 600; letter-spacing: 1px; font-size: 13px;
  background: rgba(255,255,255,0.35);
  transition: background 0.15s, box-shadow 0.15s;
}
.tb-start:hover { background: rgba(108,92,231,0.14); box-shadow: 0 0 0 3px var(--accent-glow); }
.tb-divider { width: 1px; height: 24px; background: var(--line); }
#tb-windows { display: flex; gap: 4px; flex: 0 1 auto; overflow: hidden; justify-content: center; max-width: 60%; }
.tb-win {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 9px;
  font-size: 12.5px; cursor: pointer;
  border: 1px solid transparent;
  color: var(--dim);
  white-space: nowrap;
  background: transparent;
  transition: background 0.15s;
}
.tb-win:hover { background: rgba(255,255,255,0.45); }
.tb-win.active {
  background: rgba(108,92,231,0.12);
  border-color: var(--accent-light);
  color: var(--text);
}
.tb-right { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); margin-left: 0; }
.tb-clock {
  text-align: right;
  font-size: 12px; color: var(--dim);
  line-height: 1.3; font-family: var(--mono);
}
.tb-clock span { display: block; }
#clock-time { color: var(--text); font-size: 14px; font-weight: 500; }


#start-menu {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 68px; width: 340px; z-index: 4500;
  background: rgba(244, 247, 252, 0.78);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 18px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.6);
  overflow: hidden;
}
.sm-header {
  padding: 16px 20px;
  font-size: 13px; color: var(--dim);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.sm-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px; cursor: pointer; font-size: 13.5px;
  color: var(--text-secondary);
}
.sm-item:hover { background: rgba(108,92,231,0.06); }
.sm-item .si-glyph {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--ic), color-mix(in srgb, var(--ic) 68%, #1a2440));
  box-shadow: 0 3px 8px var(--icg);
  flex-shrink: 0;
}
.sm-item .si-glyph svg { width: 18px; height: 18px; display: block; }


#window-layer { position: absolute; inset: 0; pointer-events: none; }
.window {
  position: absolute; min-width: 420px; min-height: 300px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--win-radius);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  pointer-events: auto; overflow: hidden;
  animation: win-in 0.2s ease-out;
}
@keyframes win-in { from { opacity: 0; transform: scale(0.96) translateY(12px); } to { opacity: 1; transform: none; } }
.window.closing { animation: win-out 0.15s ease-in forwards; pointer-events: none; }
@keyframes win-out { to { opacity: 0; transform: scale(0.95) translateY(8px); } }
.window.active { border-color: var(--accent-light); box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-glow); }
.win-titlebar {
  height: 40px; display: flex; align-items: center; padding: 0 8px 0 16px; gap: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid var(--line);
  cursor: move; flex-shrink: 0;
}
.win-title {
  font-size: 13px; color: var(--text-secondary); flex: 1;
  letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px;
  font-weight: 500;
}
.win-title .wt-glyph { font-size: 15px; }
.win-btns { display: flex; gap: 6px; }
.win-btn {
  width: 28px; height: 28px; border: none; background: transparent;
  color: var(--dim); border-radius: 50%; font-size: 13px;
  transition: all 0.15s; display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.win-btn svg { display: block; flex: none; }
.win-btn:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.win-btn.close:hover { background: var(--danger); color: #fff; }
.win-body { flex: 1; overflow: auto; position: relative; background: rgba(255,255,255,0.3); }
.win-body::-webkit-scrollbar { width: 6px; }
.win-body::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; }


.app-loading {
  height: 100%; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center;
  color: var(--dim); font-size: 13px; letter-spacing: 1px;
}
.app-loading .al-ring {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: al-spin 0.8s linear infinite;
}
@keyframes al-spin { to { transform: rotate(360deg); } }


#taskbar.tb-flash .tb-clock { animation: tb-blink 0.5s step-end 6; }
@keyframes tb-blink { 50% { color: var(--danger); } }


.app-root { padding: 20px 24px; overflow-y: auto; height: 100%; box-sizing: border-box; }
.app-title { font-size: 17px; font-weight: 600; margin-bottom: 4px; letter-spacing: 0.5px; }
.app-sub { font-size: 12px; color: var(--dim); margin-bottom: 14px; }
.hint-box {
  margin-top: 16px; padding: 12px 16px; border-left: 3px solid var(--accent);
  background: rgba(108,92,231,0.05); font-size: 13px; color: var(--text-secondary);
  border-radius: 0 8px 8px 0; line-height: 1.7;
}
.warn-box { border-left-color: var(--warn); background: rgba(246,173,85,0.06); color: #8b6914; }
.danger-box { border-left-color: var(--danger); background: rgba(252,129,129,0.06); color: #9b2c2c; }
.divider { height: 1px; background: var(--line); margin: 14px 0; }
.tag {
  display: inline-block; font-size: 11px; padding: 2px 10px; border-radius: 12px;
  border: 1px solid var(--accent-light); color: var(--accent); font-weight: 500; margin-right: 6px;
}
.tag.red { border-color: #feb2b2; color: var(--danger-dim); }
.tag.amber { border-color: #fbd38d; color: #9c6b1a; }
.mono { font-family: var(--mono); }
.locked-note { font-size: 12px; color: var(--dim); font-style: italic; }


.mail-layout { display: flex; height: 100%; }
.mail-list {
  width: 260px; border-right: 1px solid var(--line);
  overflow-y: auto; flex-shrink: 0; background: rgba(255,255,255,0.2);
}
.mail-item {
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background 0.1s;
}
.mail-item:hover { background: rgba(108,92,231,0.04); }
.mail-item.selected { background: rgba(108,92,231,0.08); border-left: 3px solid var(--accent); }
.mail-item .mi-from { font-size: 13px; display: flex; justify-content: space-between; align-items: center; font-weight: 500; }
.mail-item .mi-subject { font-size: 12.5px; color: var(--dim); margin-top: 3px; }
.mail-item.unread .mi-from::after { content: "●"; color: var(--danger); font-size: 10px; }
.mail-item .mi-time { font-size: 10.5px; color: var(--dim); font-family: var(--mono); }
.mail-read { flex: 1; overflow-y: auto; padding: 24px 28px; background: rgba(255,255,255,0.2); }
.mail-read h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; line-height: 1.5; }
.mail-meta { font-size: 12px; color: var(--dim); margin-bottom: 16px; line-height: 1.8; }
.mail-content { font-size: 14px; line-height: 2; color: var(--text-secondary); white-space: pre-wrap; margin-bottom: 18px; }
.mail-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.mail-search {
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.2);
}
.mail-search input {
  width: 100%; background: #fff; border: 1px solid var(--line);
  color: var(--text); padding: 6px 12px; border-radius: 20px;
  font-size: 12px; outline: none;
}
.mail-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }




.browser-top {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  background: linear-gradient(180deg, #f1f3f4, #e4e7eb);
  border-bottom: 1px solid #d1d5db;
  position: sticky; top: 0; z-index: 10; flex-shrink: 0;
}
.browser-nav { display: flex; align-items: center; gap: 1px; }
.browser-nav button {
  width: 28px; height: 28px; border: none; background: transparent;
  border-radius: 6px; font-size: 14px; color: #5f6368;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.1s;
}
.browser-nav button:hover:not(:disabled) { background: rgba(0,0,0,0.07); color: #202124; }
.browser-nav button:disabled { opacity: 0.3; cursor: default; }
.browser-addr {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #dadce0; border-radius: 18px;
  padding: 5px 14px; font-size: 12px; color: #202124;
  font-family: var(--mono); min-width: 0;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.browser-addr:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.browser-addr .lock { color: #0f9d58; font-size: 11px; flex-shrink: 0; }
.browser-addr .url { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser-addr .sep { color: #dadce0; }
.browser-page {
  padding: 0; min-height: calc(100% - 43px);
  background: #fff; overflow-y: auto;
}
.browser-page::-webkit-scrollbar { width: 8px; }
.browser-page::-webkit-scrollbar-thumb { background: #dadce0; border-radius: 4px; }
.browser-page::-webkit-scrollbar-thumb:hover { background: #bdc1c6; }


.se-home {
  min-height: 100%; display: flex; flex-direction: column;
  align-items: center; padding-top: 70px; position: relative;
}
.se-logo {
  font-size: 56px; font-weight: 800; letter-spacing: 1px;
  margin-bottom: 2px; line-height: 1;
  display: flex; align-items: baseline; gap: 0;
}
.se-logo .c1 { color: #4285f4; }
.se-logo .c2 { color: #ea4335; }
.se-logo .c3 { color: #fbbc04; }
.se-logo .c4 { color: #4285f4; }
.se-logo .c5 { color: #34a853; }
.se-logo .c6 { color: #ea4335; }
.se-logo-sub { font-size: 12px; color: #9aa0a6; margin-bottom: 26px; letter-spacing: 2px; }
.se-searchbox {
  display: flex; width: 584px; max-width: 92%;
  background: #fff; border: 1px solid #dfe1e5; border-radius: 24px;
  overflow: hidden; transition: box-shadow 0.2s, border-color 0.2s;
  align-items: center;
}
.se-searchbox:hover { box-shadow: 0 1px 6px rgba(32,33,36,0.18); border-color: rgba(223,225,229,0); }
.se-searchbox:focus-within { box-shadow: 0 1px 6px rgba(32,33,36,0.28); border-color: rgba(223,225,229,0); }
.se-searchbox .sb-icon {
  padding: 0 8px 0 16px; color: #9aa0a6; font-size: 15px; display: flex; align-items: center;
}
.se-searchbox input {
  flex: 1; border: none; outline: none; padding: 12px 8px;
  font-size: 15px; color: #202124; background: transparent;
}
.se-searchbox .sb-tools { display: flex; align-items: center; gap: 4px; padding-right: 8px; }
.se-searchbox .sb-tools span {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; color: #5f6368; font-size: 15px;
  transition: background 0.1s;
}
.se-searchbox .sb-tools span:hover { background: #f1f3f4; }
.se-searchbox .sb-divider { width: 1px; height: 24px; background: #dfe1e5; margin: 0 4px; }
.se-searchbox .sb-btn {
  background: #4285f4; border: none; color: #fff; padding: 0 24px;
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background 0.15s; align-self: stretch; display: flex; align-items: center;
  border-radius: 0;
}
.se-searchbox .sb-btn:hover { background: #3367d6; }
.se-buttons {
  display: flex; gap: 12px; margin-top: 22px;
}
.se-buttons button {
  background: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 4px;
  color: #3c4043; font-size: 13px; padding: 8px 18px; cursor: pointer;
  transition: all 0.15s;
}
.se-buttons button:hover { border-color: #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,0.1); color: #202124; }


.se-hot {
  width: 584px; max-width: 92%; margin-top: 28px;
  background: #fff; border: 1px solid #ebebeb; border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.se-hot-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid #f5f5f5;
  background: linear-gradient(90deg, #fff5f5, #fff);
}
.se-hot-title { font-size: 13px; font-weight: 600; color: #fe2d46; display: flex; align-items: center; gap: 6px; }
.se-hot-title::before { content: "热"; font-size: 14px; }
.se-hot-more { font-size: 11px; color: #9aa0a6; cursor: pointer; }
.se-hot-more:hover { color: #4285f4; }
.se-hot-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 4px 0; }
.se-hot-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; cursor: pointer; transition: background 0.1s;
}
.se-hot-item:hover { background: #f8f9fa; }
.se-hot-rank {
  width: 16px; text-align: center; font-size: 12px; font-weight: 700;
  color: #9aa0a6; flex-shrink: 0; font-style: italic;
}
.se-hot-item:nth-child(1) .se-hot-rank, .se-hot-item:nth-child(2) .se-hot-rank { color: #fe2d46; }
.se-hot-item:nth-child(3) .se-hot-rank, .se-hot-item:nth-child(4) .se-hot-rank { color: #ff7a45; }
.se-hot-text { flex: 1; font-size: 12.5px; color: #3c4043; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-hot-tag { font-size: 9px; padding: 1px 4px; border-radius: 2px; font-weight: 600; flex-shrink: 0; }
.se-hot-tag.boil { background: #fe2d46; color: #fff; }
.se-hot-tag.new { background: #4285f4; color: #fff; }
.se-hot-tag.hot { background: #ff7a45; color: #fff; }


.search-history {
  width: 584px; max-width: 92%; margin-top: 20px; text-align: left;
}
.search-history .sh-head {
  font-size: 12px; color: #9aa0a6; letter-spacing: 0.5px;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.search-history .sh-clear {
  font-size: 11px; color: #5f6368; background: none; border: none;
  cursor: pointer; padding: 2px 6px;
}
.search-history .sh-clear:hover { color: #ea4335; text-decoration: underline; }
.search-history .sh-list { display: flex; flex-wrap: wrap; gap: 6px; }
.search-history .sh-item {
  display: inline-block; padding: 4px 12px; border-radius: 14px;
  border: 1px solid #ebebeb; background: #f8f9fa;
  color: #3c4043; font-size: 12px; cursor: pointer; transition: all 0.12s;
}
.search-history .sh-item:hover { border-color: #4285f4; color: #4285f4; background: #fff; }


.se-results-top {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 24px; border-bottom: 1px solid #ebebeb;
  background: #fff; position: sticky; top: 0; z-index: 5;
}
.se-logo-sm {
  font-size: 24px; font-weight: 800; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: baseline; line-height: 1;
}
.se-logo-sm .c1 { color: #4285f4; } .se-logo-sm .c2 { color: #ea4335; }
.se-logo-sm .c3 { color: #fbbc04; } .se-logo-sm .c4 { color: #4285f4; }
.se-logo-sm .c5 { color: #34a853; } .se-logo-sm .c6 { color: #ea4335; }
.se-results-top .se-searchbox { width: auto; flex: 1; max-width: 540px; }
.se-tabs {
  display: flex; gap: 0; padding: 0 24px; border-bottom: 1px solid #ebebeb;
  background: #fff;
}
.se-tab {
  padding: 10px 14px; font-size: 13px; color: #5f6368; cursor: pointer;
  border-bottom: 3px solid transparent; transition: all 0.1s; display: flex; align-items: center; gap: 5px;
}
.se-tab.active { color: #1a73e8; border-bottom-color: #1a73e8; font-weight: 500; }
.se-tab:hover:not(.active) { color: #202124; }
.se-resultcount {
  padding: 10px 24px 0; font-size: 12px; color: #70757a;
}


.se-results-body { padding: 0 24px 20px; max-width: 720px; }
.se-result {
  padding: 10px 0; margin-bottom: 4px; cursor: pointer;
  border-radius: 8px; transition: background 0.1s;
}
.se-result:hover { background: #f8f9fa; }
.se-result-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.se-result-favicon {
  width: 22px; height: 22px; border-radius: 50%; background: #e8f0fe;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #1a73e8; font-weight: 700; flex-shrink: 0;
  border: 1px solid #dadce0;
}
.se-result-site { font-size: 12px; color: #202124; font-weight: 500; }
.se-result-url { font-size: 11px; color: #5f6368; font-family: var(--mono); }
.se-result-title {
  font-size: 17px; color: #1a0dab; font-weight: 400;
  margin: 2px 0 3px; line-height: 1.4;
}
.se-result:hover .se-result-title { text-decoration: underline; }
.se-result-snippet { font-size: 13px; color: #4d5156; line-height: 1.7; }
.se-result-snippet b { color: #dd4b39; font-weight: 600; }
.se-result-flag {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px;
  background: #fef7e0; color: #b06000; margin-left: 6px; font-weight: 500;
}


.se-related {
  margin-top: 16px; padding: 16px; background: #f8f9fa;
  border-radius: 10px; border: 1px solid #ebebeb;
}
.se-related-title { font-size: 13px; font-weight: 600; color: #202124; margin-bottom: 10px; }
.se-related-list { display: flex; flex-wrap: wrap; gap: 8px; }
.se-related-item {
  padding: 6px 14px; background: #fff; border: 1px solid #dadce0;
  border-radius: 18px; font-size: 12.5px; color: #3c4043; cursor: pointer;
  transition: all 0.12s;
}
.se-related-item:hover { border-color: #1a73e8; color: #1a73e8; background: #e8f0fe; }


.se-pagination {
  display: flex; justify-content: center; align-items: center; gap: 2px;
  padding: 24px 0 12px;
}
.se-page {
  min-width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #dadce0; border-radius: 6px; font-size: 13px;
  color: #1a73e8; cursor: pointer; padding: 0 8px; background: #fff;
  transition: all 0.1s;
}
.se-page:hover { background: #f1f3f4; }
.se-page.active { background: #1a73e8; color: #fff; border-color: #1a73e8; font-weight: 600; }
.se-page-dots { color: #5f6368; padding: 0 4px; }


.se-loading {
  text-align: center; padding: 60px 20px; color: #5f6368; font-size: 14px;
}
.se-loading .sl-spinner {
  width: 32px; height: 32px; border: 3px solid #e8f0fe; border-top-color: #4285f4;
  border-radius: 50%; margin: 0 auto 16px; animation: se-spin 0.8s linear infinite;
}
@keyframes se-spin { to { transform: rotate(360deg); } }


.site-page { background: #fff; min-height: 100%; }
.site-header {
  background: #fff; border-bottom: 1px solid #ebebeb;
  padding: 0 24px; position: sticky; top: 0; z-index: 5;
}
.site-header-inner {
  max-width: 960px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; padding: 12px 0;
}
.site-brand { display: flex; align-items: center; gap: 10px; }
.site-brand-icon {
  width: 32px; height: 32px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 16px; color: #fff;
  font-weight: 700;
}
.site-brand-name { font-size: 16px; font-weight: 700; color: #202124; }
.site-brand-tag { font-size: 10px; color: #9aa0a6; margin-top: 1px; }
.site-nav { display: flex; gap: 18px; }
.site-nav a {
  font-size: 13px; color: #5f6368; text-decoration: none; cursor: pointer;
  padding: 4px 0; border-bottom: 2px solid transparent; transition: all 0.1s;
}
.site-nav a:hover, .site-nav a.active { color: #1a73e8; border-bottom-color: #1a73e8; }
.site-breadcrumb {
  max-width: 960px; margin: 0 auto; padding: 8px 24px;
  font-size: 11.5px; color: #9aa0a6; border-bottom: 1px solid #f5f5f5;
}
.site-breadcrumb a { color: #5f6368; cursor: pointer; }
.site-breadcrumb a:hover { color: #1a73e8; }
.site-breadcrumb .sep { margin: 0 6px; color: #dadce0; }
.site-content { max-width: 960px; margin: 0 auto; padding: 24px; }
.site-article-title {
  font-size: 24px; font-weight: 700; color: #202124;
  line-height: 1.4; margin-bottom: 10px;
}
.site-article-meta {
  font-size: 12px; color: #9aa0a6; margin-bottom: 20px;
  padding-bottom: 12px; border-bottom: 1px solid #f5f5f5;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.site-article-meta span { display: flex; align-items: center; gap: 4px; }
.site-article-body { font-size: 14.5px; line-height: 2; color: #3c4043; }
.site-article-body h4 { font-size: 16px; font-weight: 600; color: #202124; margin: 20px 0 8px; }
.site-article-body p { margin-bottom: 12px; }
.site-article-body b { color: #1a73e8; }
.site-footer {
  margin-top: 32px; padding: 20px 24px; border-top: 1px solid #ebebeb;
  background: #f8f9fa; text-align: center; font-size: 11px; color: #9aa0a6;
  line-height: 1.8;
}
.site-footer a { color: #5f6368; cursor: pointer; margin: 0 8px; }
.site-footer a:hover { color: #1a73e8; }


.gov-page { background: #fff; padding: 0; }
.gov-page .web-header {
  padding: 14px 24px; border-bottom: 1px solid #ebebeb; margin-bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(180deg, #fff, #fafbfc);
}
.gov-page .web-header h2 { font-size: 18px; letter-spacing: 0.5px; font-weight: 700; color: #202124; }
.gov-page .web-header .wh-url { font-size: 11px; color: #9aa0a6; font-family: var(--mono); }
.gov-banner {
  background: linear-gradient(90deg, #e8f0fe, #f0f4ff);
  border: 1px solid #d2e3fc; border-left: 4px solid #1a73e8;
  padding: 12px 18px; border-radius: 0 8px 8px 0;
  font-size: 13px; color: #3c4043; margin: 16px 24px;
}
.gov-article { font-size: 14px; line-height: 2; color: #3c4043; padding: 0 24px; }
.gov-article h4 { color: #202124; margin: 16px 0 6px; font-weight: 600; font-size: 15px; }
.gov-article b { color: #1a73e8; }
.gov-fine {
  font-size: 11px; color: #9aa0a6; margin: 20px 24px 0; padding: 12px 0;
  border-top: 1px solid #f5f5f5; text-align: center;
}


.hint-box {
  background: #e8f0fe; border-left: 3px solid #1a73e8;
  padding: 10px 14px; border-radius: 0 6px 6px 0;
  font-size: 12.5px; color: #3c4043; line-height: 1.8; margin: 12px 0;
}
.danger-box {
  background: #fce8e6; border-left-color: #ea4335; color: #5f2120;
}
.danger-box b { color: #c5221f; }
.locked-note { font-size: 11px; color: #9aa0a6; margin-left: 8px; }


.dark-forum {
  background: #0b120e; min-height: 100%; color: #a9c9b4;
  overflow-y: auto;
}
.dark-forum .web-header {
  background: linear-gradient(180deg, #080d0a, #0c140f);
  border-bottom: 1px solid #1f3a2a !important;
  padding: 14px 20px; display: flex; justify-content: space-between; align-items: center;
}
.dark-forum .web-header h2 { color: #9fe8b8 !important; font-size: 16px !important; font-weight: 700; letter-spacing: 1px; }
.dark-forum .web-header .wh-url { color: #4e7a5e !important; font-size: 11px !important; font-family: var(--mono) !important; }


.an-banner {
  padding: 16px 20px; background:
    repeating-linear-gradient(45deg, rgba(74,222,128,0.03) 0 10px, transparent 10px 20px),
    #0e1a13;
  border-bottom: 1px solid #1f3a2a;
}
.an-banner .an-name { font-size: 18px; font-weight: 800; color: #9fe8b8; letter-spacing: 4px; font-family: var(--mono); }
.an-banner .an-slogan { font-size: 12px; color: #5e8a70; margin-top: 4px; font-style: italic; }
.an-stats {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 9px 20px; background: #0a100c; border-bottom: 1px solid #16241b;
  font-size: 11px; color: #4e7a5e; font-family: var(--mono);
}
.an-stats b { color: #7fd6a0; font-weight: 600; }


.forum-gate {
  max-width: 460px; margin: 40px auto; text-align: center;
  padding: 36px; background: #0f1812; border: 1px solid #2c5238;
  border-radius: 12px; box-shadow: 0 0 50px rgba(44,82,56,0.35), inset 0 0 30px rgba(0,0,0,0.4);
}
.forum-gate h3 { color: #9fe8b8; margin-bottom: 8px; letter-spacing: 10px; font-weight: 700; font-size: 20px; font-family: var(--mono); text-shadow: 0 0 12px rgba(159,232,184,0.4); }
.forum-gate p { font-size: 12.5px; color: #7fa58c; margin-bottom: 18px; line-height: 1.9; }
.forum-gate input {
  width: 100%; background: #060b08; border: 1px solid #2c5238;
  color: #9fe8b8; padding: 10px 14px; border-radius: 8px;
  font-size: 15px; text-align: center; letter-spacing: 6px;
  font-family: var(--mono); outline: none; margin-bottom: 12px;
}
.forum-gate input:focus { border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.15); }
.forum-gate .btn-primary { background: #1f3a2a; border-color: #2c5238; color: #9fe8b8; letter-spacing: 4px; }
.forum-gate .btn-primary:hover { background: #2c5238; }


.forum-thread {
  display: flex; gap: 12px; padding: 14px 20px;
  border-bottom: 1px solid #16241b; cursor: pointer; align-items: center;
  transition: background 0.12s;
}
.forum-thread:hover { background: rgba(46,90,60,0.18); }
.forum-thread .ft-avatar {
  width: 40px; height: 40px; border-radius: 10px;
  background: #14241a; border: 1px solid #2c5238;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 18px;
}
.forum-thread .ft-title { font-size: 14px; color: #cfe8d6; font-weight: 500; }
.forum-thread .ft-meta { font-size: 11.5px; color: #5e8a70; margin-top: 3px; }
.ft-rep { margin-left: auto; font-size: 11px; color: #4e7a5e; font-family: var(--mono); white-space: nowrap; }


.forum-post { font-size: 14px; line-height: 2; color: #b9d4c0; padding: 16px 20px; }
.forum-post .fp-author { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.forum-post .fp-author .ft-avatar { width: 32px; height: 32px; font-size: 15px; border-radius: 8px; }
.forum-post .fp-name { color: #7fd6a0; font-weight: 600; }
.forum-post .fp-floor { margin-left: auto; font-size: 11px; color: #4e7a5e; font-family: var(--mono); }
.dark-forum .divider { background: #16241b; }
.dark-forum .hint-box {
  background: rgba(44,82,56,0.16); border-left-color: #2c5238; color: #9fc4ab;
}
.forum-backbar { padding: 10px 20px; border-bottom: 1px solid #16241b; background: #0a100c; }
.forum-backbar .btn { font-size: 12.5px; padding: 5px 14px; border-radius: 6px; background: #14241a; color: #9fe8b8; border-color: #2c5238; }
.forum-backbar .btn:hover { background: #1f3a2a; }
.dark-forum .pass-error { color: #f87171; }
.dark-forum .danger { color: #f87171; }


.fb-page { background: #f0f2f5; min-height: 100%; }
.fb-topnav {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; background: #1877f2;
}
.fb-brand { color: #fff; font-size: 17px; font-weight: 800; letter-spacing: 0.5px; white-space: nowrap; }
.fb-searchbar {
  flex: 1; max-width: 320px; background: #f0f2f5; border-radius: 24px;
  padding: 7px 14px; font-size: 12.5px; color: #65676b; cursor: pointer;
}
.fb-navicons { display: flex; gap: 14px; color: #fff; font-size: 15px; }
.fb-navicons span { cursor: pointer; }
.fb-body { display: flex; gap: 16px; max-width: 1100px; margin: 0 auto; padding: 16px; align-items: flex-start; }
.fb-left { width: 200px; flex: none; display: flex; flex-direction: column; gap: 12px; }
.fb-main { flex: 1; min-width: 0; }
.fb-card { background: #fff; border-radius: 10px; padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.fb-left-user { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.fb-mini-ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.fb-link { padding: 8px 4px; font-size: 13.5px; color: #050505; border-bottom: 1px solid #f0f2f5; cursor: pointer; }
.fb-link:hover { background: #f0f2f5; border-radius: 6px; }
.fb-intro-line { font-size: 12.5px; color: #65676b; line-height: 1.9; }
.fb-profile { background: #fff; border-radius: 0 0 10px 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.fb-cover { height: 170px; background: linear-gradient(135deg, #4e6ef2, #9a7bff); }
.fb-profile-head { display: flex; align-items: flex-end; gap: 14px; padding: 0 20px 14px; margin-top: -34px; position: relative; }
.fb-avatar {
  width: 110px; height: 110px; border-radius: 50%; border: 4px solid #fff;
  background: #fff; overflow: hidden; flex: none;
}
.fb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-pinfo { flex: 1; padding-top: 34px; }
.fb-pname { font-size: 22px; font-weight: 800; color: #050505; }
.fb-pid { font-size: 12px; color: #65676b; }
.fb-tabs { display: flex; gap: 18px; margin-top: 10px; font-size: 13px; color: #65676b; border-top: 1px solid #e4e6eb; padding-top: 10px; }
.fb-tabs .on { color: #1877f2; font-weight: 700; border-bottom: 3px solid #1877f2; padding-bottom: 6px; }
.fb-follow { background: #1877f2; color: #fff; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.fb-bio-card { background: #fff; border-radius: 10px; padding: 14px 18px; margin: 12px 0; font-size: 13.5px; color: #050505; line-height: 1.9; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.fb-post { background: #fff; border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.fb-post-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.fb-post-ava { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.fb-post-author { font-size: 13.5px; font-weight: 700; color: #050505; }
.fb-post-time { font-size: 11px; color: #65676b; }
.fb-post-body { font-size: 14px; color: #050505; line-height: 1.7; }
.fb-post-actions {
  display: flex; gap: 18px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid #e4e6eb; font-size: 12.5px; color: #65676b;
}
.fb-post-actions span { cursor: pointer; }
.fb-post-actions span:hover { color: #1877f2; }
.fb-post-img { margin: 10px 0 4px; border-radius: 8px; overflow: hidden; }
.fb-post-img img { width: 100%; display: block; max-height: 340px; object-fit: cover; }
.social-post {
  padding: 14px 24px; border-bottom: 1px solid #f5f5f5; font-size: 13.5px;
  color: #3c4043; line-height: 1.8;
}
.social-post .sp-time { font-size: 11px; color: #9aa0a6; margin-bottom: 4px; }


.news-paper {
  max-width: 720px; margin: 0 auto; padding: 24px;
  background: #fff;
}
.news-paper .np-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 3px double #202124; padding-bottom: 8px; margin-bottom: 16px;
}
.news-paper .np-paper-name { font-size: 28px; font-weight: 900; color: #202124; letter-spacing: 4px; }
.news-paper .np-date { font-size: 11px; color: #5f6368; }
.news-paper h3 { font-size: 20px; font-weight: 700; color: #202124; margin-bottom: 12px; line-height: 1.5; }
.news-paper p { font-size: 14px; line-height: 2; color: #3c4043; margin-bottom: 10px; text-indent: 2em; }


.file-card {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px;
  border: 1px solid #ebebeb; border-radius: 8px; background: #fff;
  cursor: pointer; transition: all 0.15s;
}
.file-card:hover { border-color: #1a73e8; box-shadow: 0 2px 8px rgba(26,115,232,0.1); background: #f8faff; }
.file-card .fc-icon { font-size: 24px; flex-shrink: 0; }
.file-card .fc-name { font-size: 13.5px; color: #202124; font-weight: 500; }
.file-card .fc-meta { font-size: 11px; color: #9aa0a6; margin-top: 2px; }


.pass-box {
  background: #fff; border-radius: 12px; padding: 28px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12); max-width: 420px; width: 90%;
  text-align: center;
}
.pass-box h3 { font-size: 18px; font-weight: 700; color: #202124; margin-bottom: 8px; }
.pass-box .pass-hint { font-size: 13px; color: #5f6368; line-height: 1.8; margin-bottom: 16px; }
.pass-box .pass-input { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.pass-box .pass-input input {
  flex: 1; padding: 10px 14px; border: 1px solid #dadce0; border-radius: 8px;
  font-size: 14px; outline: none; transition: all 0.15s;
}
.pass-box .pass-input input:focus { border-color: #1a73e8; box-shadow: 0 0 0 3px rgba(26,115,232,0.15); }
.pass-box .pass-error { font-size: 12px; color: #ea4335; min-height: 18px; margin-bottom: 8px; }
.pass-box .pass-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }


.choice-box {
  background: #fff; border-radius: 12px; padding: 28px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12); max-width: 520px; width: 92%;
}
.choice-box h3 { font-size: 20px; font-weight: 700; color: #202124; text-align: center; margin-bottom: 6px; }
.choice-box .cb-sub { font-size: 13px; color: #5f6368; text-align: center; margin-bottom: 20px; line-height: 1.8; }
.choice-item {
  padding: 14px 16px; border: 1px solid #ebebeb; border-radius: 10px;
  margin-bottom: 10px; cursor: pointer; transition: all 0.15s;
}
.choice-item:hover { border-color: #1a73e8; background: #f8faff; box-shadow: 0 2px 8px rgba(26,115,232,0.08); }
.choice-item .ci-title { font-size: 15px; font-weight: 600; color: #202124; margin-bottom: 4px; }
.choice-item .ci-desc { font-size: 12.5px; color: #5f6368; line-height: 1.7; }




.ms-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 60px; background: #fff;
  border-bottom: 1px solid #e8eaed; position: sticky; top: 0; z-index: 20;
}
.ms-nav-brand { display: flex; align-items: center; gap: 10px; }
.ms-nav-logo {
  width: 36px; height: 36px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 18px; color: #fff;
  font-weight: 800;
}
.ms-nav-title { font-size: 16px; font-weight: 700; color: #202124; }
.ms-nav-sub { font-size: 10px; color: #9aa0a6; margin-top: 1px; letter-spacing: 0.5px; }
.ms-nav-links { display: flex; gap: 4px; }
.ms-nav-links a {
  padding: 8px 14px; font-size: 13px; color: #5f6368; text-decoration: none;
  cursor: pointer; border-radius: 6px; transition: all 0.12s; font-weight: 500;
}
.ms-nav-links a:hover { background: #f1f3f4; color: #202124; }
.ms-nav-links a.active { color: #1a73e8; background: #e8f0fe; font-weight: 600; }
.ms-nav-actions { display: flex; align-items: center; gap: 8px; }
.ms-nav-search {
  display: flex; align-items: center; gap: 6px; background: #f1f3f4;
  border-radius: 20px; padding: 6px 14px; width: 200px;
}
.ms-nav-search input {
  border: none; background: transparent; outline: none; font-size: 12px;
  color: #202124; flex: 1;
}
.ms-nav-btn {
  padding: 7px 16px; border-radius: 6px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; border: 1px solid #dadce0; background: #fff; color: #1a73e8;
  transition: all 0.12s;
}
.ms-nav-btn:hover { background: #f8faff; border-color: #1a73e8; }
.ms-nav-btn.primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.ms-nav-btn.primary:hover { background: #1557b0; }


.ms-hero {
  padding: 48px 32px; position: relative; overflow: hidden;
}
.ms-hero.blue { background: linear-gradient(135deg, #1a73e8 0%, #4285f4 50%, #669df6 100%); }
.ms-hero.green { background: linear-gradient(135deg, #0d652d 0%, #188038 50%, #34a853 100%); }
.ms-hero.teal { background: linear-gradient(135deg, #004d40 0%, #00695c 50%, #26a69a 100%); }
.ms-hero.orange { background: linear-gradient(135deg, #b34600 0%, #e8710a 50%, #fbbc04 100%); }
.ms-hero.purple { background: linear-gradient(135deg, #5b2c8e 0%, #7b1fa2 50%, #ab47bc 100%); }
.ms-hero.dark { background: linear-gradient(135deg, #202124 0%, #3c4043 50%, #5f6368 100%); }
.ms-hero::before {
  content: ''; position: absolute; top: -50%; right: -10%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  border-radius: 50%;
}
.ms-hero::after {
  content: ''; position: absolute; bottom: -30%; left: 20%; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
}
.ms-hero-content { position: relative; z-index: 2; max-width: 700px; }
.ms-hero-tag {
  display: inline-block; padding: 4px 12px; background: rgba(255,255,255,0.2);
  border-radius: 12px; font-size: 11px; color: #fff; margin-bottom: 14px;
  backdrop-filter: blur(4px); letter-spacing: 1px;
}
.ms-hero h1 { font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 10px; line-height: 1.3; }
.ms-hero p { font-size: 14.5px; color: rgba(255,255,255,0.9); line-height: 1.8; margin-bottom: 20px; }
.ms-hero-actions { display: flex; gap: 10px; }
.ms-hero-btn {
  padding: 10px 24px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; border: none; transition: all 0.15s;
}
.ms-hero-btn.white { background: #fff; color: #202124; }
.ms-hero-btn.white:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.ms-hero-btn.outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.6); }
.ms-hero-btn.outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }


.ms-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; padding: 24px 32px; background: #fff;
}
.ms-stat {
  padding: 20px; border-radius: 12px; background: #f8f9fa;
  border: 1px solid #e8eaed; transition: all 0.15s;
}
.ms-stat:hover { border-color: #1a73e8; box-shadow: 0 2px 8px rgba(26,115,232,0.1); transform: translateY(-2px); }
.ms-stat-icon { font-size: 24px; margin-bottom: 8px; }
.ms-stat-num { font-size: 28px; font-weight: 800; color: #202124; line-height: 1; }
.ms-stat-num .unit { font-size: 14px; font-weight: 500; color: #5f6368; margin-left: 2px; }
.ms-stat-label { font-size: 12px; color: #5f6368; margin-top: 6px; }
.ms-stat.trend-up .ms-stat-num { color: #188038; }
.ms-stat.trend-down .ms-stat-num { color: #d93025; }


.ms-section { padding: 32px; background: #fff; }
.ms-section-title {
  font-size: 20px; font-weight: 700; color: #202124; margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.ms-section-sub { font-size: 13px; color: #5f6368; margin-bottom: 20px; }
.ms-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.ms-card {
  padding: 22px; border-radius: 12px; background: #fff;
  border: 1px solid #e8eaed; cursor: pointer; transition: all 0.15s;
}
.ms-card:hover { border-color: #1a73e8; box-shadow: 0 4px 16px rgba(26,115,232,0.12); transform: translateY(-2px); }
.ms-card-icon {
  width: 44px; height: 44px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px;
}
.ms-card-icon.blue { background: #e8f0fe; }
.ms-card-icon.green { background: #e6f4ea; }
.ms-card-icon.orange { background: #fef7e0; }
.ms-card-icon.red { background: #fce8e6; }
.ms-card-icon.purple { background: #f3e8fd; }
.ms-card-icon.teal { background: #e0f7fa; }
.ms-card-title { font-size: 15px; font-weight: 600; color: #202124; margin-bottom: 6px; }
.ms-card-desc { font-size: 12.5px; color: #5f6368; line-height: 1.7; }
.ms-card-arrow { font-size: 11px; color: #1a73e8; margin-top: 10px; font-weight: 600; }


.ms-news-list { display: flex; flex-direction: column; gap: 0; }
.ms-news-item {
  display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid #f1f3f4;
  cursor: pointer; transition: background 0.1s;
}
.ms-news-item:hover { background: #f8f9fa; }
.ms-news-thumb {
  width: 120px; height: 80px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.ms-news-content { flex: 1; min-width: 0; }
.ms-news-title { font-size: 15px; font-weight: 600; color: #202124; margin-bottom: 6px; line-height: 1.4; }
.ms-news-item:hover .ms-news-title { color: #1a73e8; }
.ms-news-snippet { font-size: 12.5px; color: #5f6368; line-height: 1.7; margin-bottom: 6px; }
.ms-news-meta { font-size: 11px; color: #9aa0a6; display: flex; gap: 12px; }
.ms-news-tag {
  display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px;
  font-weight: 600; background: #e8f0fe; color: #1a73e8;
}


.ms-progress { margin: 12px 0; }
.ms-progress-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.ms-progress-label .name { color: #5f6368; font-weight: 500; }
.ms-progress-label .val { color: #202124; font-weight: 700; }
.ms-progress-bar { height: 8px; background: #e8eaed; border-radius: 4px; overflow: hidden; }
.ms-progress-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.ms-progress-fill.blue { background: linear-gradient(90deg, #1a73e8, #4285f4); }
.ms-progress-fill.green { background: linear-gradient(90deg, #188038, #34a853); }
.ms-progress-fill.orange { background: linear-gradient(90deg, #e8710a, #fbbc04); }
.ms-progress-fill.red { background: linear-gradient(90deg, #d93025, #ea4335); }


.ms-alert {
  padding: 14px 18px; border-radius: 10px; margin: 16px 0;
  display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.7;
}
.ms-alert.info { background: #e8f0fe; border-left: 4px solid #1a73e8; color: #174ea6; }
.ms-alert.warning { background: #fef7e0; border-left: 4px solid #fbbc04; color: #b06000; }
.ms-alert.danger { background: #fce8e6; border-left: 4px solid #d93025; color: #a50e0e; }
.ms-alert.success { background: #e6f4ea; border-left: 4px solid #188038; color: #0d652d; }
.ms-alert-icon { font-size: 18px; flex-shrink: 0; }


.ms-infobox {
  float: right; width: 280px; margin: 0 0 16px 24px;
  background: #f8f9fa; border: 1px solid #e8eaed; border-radius: 10px; overflow: hidden;
}
.ms-infobox-header {
  padding: 14px 16px; text-align: center; font-weight: 700; font-size: 15px;
  color: #fff;
}
.ms-infobox-row {
  display: flex; padding: 8px 16px; border-bottom: 1px solid #f1f3f4; font-size: 12.5px;
}
.ms-infobox-row:last-child { border-bottom: none; }
.ms-infobox-row .k { color: #5f6368; width: 80px; flex-shrink: 0; font-weight: 500; }
.ms-infobox-row .v { color: #202124; flex: 1; }


.ms-footer {
  background: #202124; color: #9aa0a6; padding: 32px;
}
.ms-footer-top {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px; margin-bottom: 24px;
}
.ms-footer-col h4 { color: #e8eaed; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.ms-footer-col a {
  display: block; font-size: 12px; color: #9aa0a6; text-decoration: none;
  padding: 3px 0; cursor: pointer; transition: color 0.1s;
}
.ms-footer-col a:hover { color: #fff; }
.ms-footer-bottom {
  border-top: 1px solid #3c4043; padding-top: 16px; display: flex;
  justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 11px;
}
.ms-footer-brand { color: #e8eaed; font-weight: 700; font-size: 14px; }


.ms-twocol { display: flex; gap: 24px; padding: 24px 32px; background: #fff; }
.ms-twocol-main { flex: 1; min-width: 0; }
.ms-twocol-side { width: 280px; flex-shrink: 0; }
.ms-side-card {
  background: #f8f9fa; border: 1px solid #e8eaed; border-radius: 10px;
  padding: 16px; margin-bottom: 16px;
}
.ms-side-card h4 { font-size: 13px; font-weight: 700; color: #202124; margin-bottom: 10px; }
.ms-side-link {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  font-size: 12.5px; color: #5f6368; cursor: pointer; border-bottom: 1px solid #f1f3f4;
}
.ms-side-link:last-child { border-bottom: none; }
.ms-side-link:hover { color: #1a73e8; }


.map-view {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 500px 320px at 25% 60%, rgba(90,169,230,0.10), transparent 60%),
    radial-gradient(ellipse 400px 280px at 78% 22%, rgba(120,100,255,0.08), transparent 55%),
    radial-gradient(ellipse 300px 200px at 60% 80%, rgba(80,200,160,0.06), transparent 60%),
    linear-gradient(155deg, #16202e 0%, #1a2736 40%, #131c28 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.35), 0 4px 20px rgba(0,0,0,0.2);
}
.map-view::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.map-road {
  position: absolute; background: rgba(140,170,210,0.18);
  border-radius: 8px;
}
.map-road.major { background: rgba(160,190,225,0.28); }
.map-pin { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; z-index: 3; }
.map-pin:hover { z-index: 5; }
.mp-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, #6ec5ff, #3b82f6);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.25), 0 0 16px rgba(59,130,246,0.6), 0 2px 6px rgba(0,0,0,0.4);
  transition: transform 0.15s;
  position: relative;
}
.mp-dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid rgba(110,197,255,0.5);
  animation: pin-pulse 2s ease-out infinite;
}
@keyframes pin-pulse {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.map-pin:hover .mp-dot { transform: scale(1.35); }
.map-pin.warn .mp-dot {
  background: linear-gradient(135deg, #ffb854, #f97316);
  box-shadow: 0 0 0 4px rgba(249,115,22,0.25), 0 0 18px rgba(249,115,22,0.7), 0 2px 6px rgba(0,0,0,0.4);
}
.map-pin.warn .mp-dot::after { border-color: rgba(255,184,84,0.6); }
.mp-label {
  background: rgba(22,32,46,0.92); border: 1px solid rgba(110,160,220,0.25);
  color: #c8d8ec; font-size: 11.5px; padding: 4px 12px;
  border-radius: 10px; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: all 0.15s; backdrop-filter: blur(4px);
}
.map-pin:hover .mp-label { color: #fff; border-color: rgba(110,197,255,0.6); background: rgba(30,50,75,0.95); box-shadow: 0 4px 16px rgba(0,0,0,0.5); }


.street-view {
  position: relative; height: 300px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); margin-bottom: 14px;
  background: linear-gradient(180deg, #c6d6e6 0%, #dce9f2 52%, #a9bccd 52.5%, #8297ab 100%);
  box-shadow: var(--shadow-sm);
}
.sv-road {
  position: absolute; left: 0; right: 0; top: 56%; height: 22%;
  background: linear-gradient(180deg, #93a5b8, #6e8297);
}
.sv-shop {
  position: absolute; left: 14%; bottom: 10%; width: 230px; height: 150px;
  background: linear-gradient(180deg, #edf1f6, #dbe3ec);
  border: 2px solid #c3cfdd; border-radius: 6px 6px 0 0;
  box-shadow: 0 12px 26px rgba(0,0,0,0.14);
}
.sv-signboard {
  position: absolute; top: -30px; left: -2px; right: -2px; height: 30px;
  background: linear-gradient(180deg, #3a4a5a, #2b3946); color: #f2e8cf;
  font-size: 12px; letter-spacing: 1px; border-radius: 4px 4px 0 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--mono);
}
.sv-signboard .scratch { color: #d4af37; }
.sv-window {
  position: absolute; top: 48px; width: 62px; height: 66px;
  background: linear-gradient(180deg, #cfe2f0, #a9c6dc);
  border: 3px solid #c3cfdd; box-shadow: inset 0 0 16px rgba(70,110,150,0.4);
}
.sv-window.l { left: 16px; } .sv-window.r { right: 16px; }
.sv-door {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 52px; height: 96px; background: #5f6f82;
  border: 3px solid #c3cfdd; border-bottom: none; border-radius: 4px 4px 0 0;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.25);
}
.sv-dust {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background:
    radial-gradient(1.5px 1.5px at 18% 32%, rgba(255,255,255,0.55) 0 40%, transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 58%, rgba(255,255,255,0.45) 0 40%, transparent 60%),
    radial-gradient(1px 1px at 64% 38%, rgba(255,255,255,0.55) 0 40%, transparent 60%),
    radial-gradient(1px 1px at 82% 66%, rgba(255,255,255,0.45) 0 40%, transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 78%, rgba(120,140,160,0.3) 0 40%, transparent 60%);
}


.phone-panel {
  margin-top: 14px; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; background: rgba(255,255,255,0.55);
}
.phone-num {
  font-family: var(--mono); font-size: 22px; letter-spacing: 5px;
  text-align: center; color: var(--text); margin: 6px 0 14px; font-weight: 600;
}
.dial-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  max-width: 360px; margin: 0 auto;
}
.dial-key {
  height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
  font-size: 16px; font-family: var(--mono); color: var(--text); cursor: pointer;
  transition: all 0.12s;
}
.dial-key:hover { border-color: var(--accent); color: var(--accent); background: #f7faff; }
.dial-key:active { transform: scale(0.94); }
.dial-key:disabled { opacity: 0.4; cursor: not-allowed; }
.phone-msg { text-align: center; font-size: 12.5px; color: var(--dim); margin-top: 12px; min-height: 18px; line-height: 1.8; }


.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.file-card {
  padding: 16px 10px; text-align: center; border-radius: 14px;
  cursor: pointer; border: 1px solid var(--line);
  background: rgba(255,255,255,0.3);
  transition: all 0.15s;
}
.file-card:hover { background: #fff; border-color: var(--accent); box-shadow: var(--shadow-sm); }
.file-card .fc-icon { font-size: 38px; margin-bottom: 8px; }
.file-card .fc-name { font-size: 13px; font-weight: 500; }
.file-card .fc-meta { font-size: 11px; color: var(--dim); margin-top: 4px; font-family: var(--mono); }
.file-viewer { padding: 24px 30px; line-height: 2; font-size: 14px; color: var(--text-secondary); }
.fv-back { margin-bottom: 16px; }
.photo-frame {
  background: #fff; border: 8px solid var(--line); border-radius: 8px;
  position: relative; max-width: 480px; margin: 0 auto;
  cursor: crosshair; overflow: hidden;
}
.photo-frame .pf-img {
  height: 260px; display: flex; align-items: flex-end; justify-content: center;
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #c8d6e5, #a0b4c8);
}
.photo-frame .pf-img .pf-photo,
.pf-img img.pf-photo {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pf-hover-reveal {
  position: absolute; inset: 0; background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; transition: opacity 0.3s;
  text-align: center; font-size: 14px; color: var(--text); line-height: 1.9;
}
.photo-frame:hover .pf-hover-reveal { opacity: 1; }
.photo-frame.flipped .pf-hover-reveal { opacity: 1; }
.pf-hint { text-align: center; font-size: 11.5px; color: var(--dim); margin-top: 10px; }


.pass-hint { font-size: 13px; color: var(--text-secondary); line-height: 1.9; margin-top: 10px; }
.pass-hint b { color: var(--accent); }
.pass-input { display: flex; gap: 10px; margin-top: 14px; }
.pass-input input {
  flex: 1; background: #fff; border: 1px solid var(--line); color: var(--text);
  padding: 10px 14px; border-radius: 10px; font-size: 15px; font-family: var(--mono);
  text-align: center; letter-spacing: 6px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pass-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.pass-error { margin-top: 12px; font-size: 12.5px; color: var(--danger-dim); min-height: 18px; line-height: 1.8; }

.file-crumb { font-size: 12px; color: var(--dim); margin-bottom: 14px; font-family: var(--mono); }
.file-crumb b { color: var(--accent); }

.mail-shot {
  background: #f4f7fb; border: 1px solid #c6d2e0; border-radius: 12px;
  overflow: hidden; box-shadow: 0 2px 10px rgba(20,40,70,0.12);
  margin-bottom: 10px;
}
.mail-shot .ms-titlebar {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: linear-gradient(180deg, #eef3f9, #dde6f0);
  border-bottom: 1px solid #c6d2e0; padding: 9px 14px;
  font-size: 12.5px; color: #33475e; font-weight: 600;
}
.mail-shot .ms-dots { display: inline-flex; gap: 5px; }
.mail-shot .ms-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; display: block; }
.mail-shot .ms-dots i:nth-child(2) { background: #febc2e; }
.mail-shot .ms-dots i:nth-child(3) { background: #28c840; }
.mail-shot .ms-min { font-size: 12px; color: #7a8ba0; font-weight: 400; }
.mail-shot .ms-sub { font-size: 11.5px; color: #5d7188; padding: 8px 14px; background: #eaf0f7; border-bottom: 1px solid #d4deea; font-family: var(--mono); }
.mail-shot .ms-item { padding: 10px 14px; border-bottom: 1px solid #e2e9f2; background: #fff; }
.mail-shot .msm-head { font-size: 12.5px; color: #33475e; margin-bottom: 5px; }
.mail-shot .msm-head b { color: #1a6feb; }
.mail-shot .msm-time { float: right; font-size: 11px; color: #8aa0b8; font-family: var(--mono); }
.mail-shot .msm-body { font-size: 12.5px; color: #40566d; line-height: 1.9; }
.mail-shot .ms-ps { padding: 9px 14px; font-size: 12px; color: #8a6a2a; background: #fdf8ec; font-style: italic; }

.chat-envelope {
  background: #fffdf5; border: 1px solid #e8d9a8; border-radius: 12px;
  overflow: hidden; box-shadow: 0 3px 14px rgba(120,90,20,0.14);
  max-width: 420px;
}
.chat-envelope .ce-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(180deg, #faf3dd, #f0e4c2);
  border-bottom: 1px solid #e2d2a0; padding: 8px 14px;
  font-size: 13px; color: #6b5314; font-weight: 700; letter-spacing: 1px;
}
.chat-envelope .ce-tag { font-size: 10.5px; color: #a08a4a; font-weight: 400; font-family: var(--mono); }
.chat-envelope .ce-body {
  padding: 14px 16px; font-size: 13px; line-height: 2.05;
  color: #4a3f28; white-space: normal; font-family: var(--font);
  text-align: left;
}
.chat-envelope .ce-foot { padding: 7px 14px; font-size: 11px; color: #a08a4a; border-top: 1px dashed #e2d2a0; font-family: var(--mono); }


.an-dm {
  margin: 12px 20px 6px; background: #0d1810; border: 1px solid #2c5238;
  border-radius: 12px; overflow: hidden;
}
.an-dm .an-dm-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; background: #132318; font-size: 13px;
  color: #9fe8b8; font-weight: 600; letter-spacing: 0.5px;
}
.an-dm .an-dm-new {
  font-size: 10px; color: #082410; background: #4ade80; border-radius: 8px;
  padding: 1px 8px; font-weight: 700;
}
.an-dm .an-dm-body { padding: 12px 14px; font-size: 13px; line-height: 2; color: #b9d4c0; }
.an-dm .an-dm-foot { padding: 7px 14px; font-size: 11px; color: #4e7a5e; border-top: 1px solid #16241b; font-family: var(--mono); }


.gov-morse img { vertical-align: middle; }

.txt-file {
  background: #f7fafc; border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 22px; font-size: 14px; line-height: 2.2; color: var(--text-secondary);
  font-family: var(--mono); white-space: pre-wrap; margin-bottom: 14px;
}

.chat-shot {
  background: #f7fafc; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
}
.chat-msg {
  max-width: 82%; padding: 8px 13px; border-radius: 12px;
  font-size: 13px; line-height: 1.7; color: var(--text); word-break: break-word;
}
.chat-msg.left { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-msg.right { align-self: flex-end; background: linear-gradient(135deg, var(--accent-light), var(--accent)); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg .cm-sender { font-size: 11px; color: var(--accent); font-weight: 600; margin-bottom: 3px; }
.chat-msg .cm-read { font-size: 10px; color: rgba(255,255,255,0.78); text-align: right; margin-top: 3px; letter-spacing: 0.5px; }


.remote-topbar {
  padding: 10px 16px; background: #edf2f7; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--dim); display: flex; gap: 16px; align-items: center;
}
.remote-topbar .dot-live { width: 8px; height: 8px; border-radius: 50%; background: #48bb78; animation: pulse 1s infinite; }
.remote-screen { padding: 30px; background: #f7fafc; min-height: 300px; }
.remote-folder {
  width: 110px; text-align: center; display: inline-block;
  margin: 12px; cursor: pointer; padding: 12px 6px;
  border-radius: 12px; transition: background 0.15s;
}
.remote-folder:hover { background: rgba(108,92,231,0.06); }
.remote-folder .rf-icon { font-size: 44px; }
.remote-folder .rf-name { font-size: 12.5px; margin-top: 6px; color: var(--text-secondary); }


.id-login { max-width: 420px; margin: 30px auto; text-align: center; }
.id-emblem { font-size: 46px; margin-bottom: 10px; }
.id-form input {
  width: 100%; margin-bottom: 12px;
  background: #fff; border: 1px solid var(--line);
  color: var(--text); padding: 11px 14px; border-radius: 10px;
  font-size: 14px; outline: none;
}
.id-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }

.db-app { background: #0d1524; color: #c9d7e8; font-family: var(--mono, monospace); }
.db-topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #0a1020; border: 1px solid #1c2a42; border-radius: 10px;
  padding: 10px 14px; font-size: 12px;
}
.db-brand { color: #7fd0ff; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; }
.db-ver { color: #4a5b76; }
.db-status { color: #8fd6a0; display: flex; align-items: center; gap: 6px; }
.db-dot { width: 7px; height: 7px; border-radius: 50%; background: #48bb78; display: inline-block; animation: pulse 1.6s infinite; }
.db-audit { color: #d8a657; margin-left: auto; }
.db-tabs { display: flex; gap: 8px; margin: 12px 0 4px; }
.db-tab {
  background: #101b30; color: #8ba3c7; border: 1px solid #1c2a42;
  border-radius: 8px; padding: 8px 14px; font-size: 12.5px; cursor: pointer;
  font-family: var(--mono, monospace); transition: all 0.15s;
}
.db-tab:hover { color: #c9d7e8; border-color: #2c3e5f; }
.db-tab.on { background: #16324f; color: #7fd0ff; border-color: #1f4a75; }
.db-panel {
  background: #0e1a2e; border: 1px solid #1c2a42; border-radius: 10px;
  padding: 20px; max-width: 460px; margin: 18px auto 0;
}
.db-panel-title { color: #e8eef7; font-size: 14.5px; font-weight: 700; margin-bottom: 6px; }
.db-req {
  color: #ff8a8a; font-size: 10.5px; border: 1px solid #5c2f2f;
  padding: 2px 8px; border-radius: 4px; margin-left: 8px; vertical-align: 2px;
}
.db-sub { color: #5f7ea8; font-size: 11.5px; margin-bottom: 14px; line-height: 1.7; }
.db-field { margin-bottom: 12px; }
.db-field label { display: block; color: #5f7ea8; font-size: 11px; letter-spacing: 1px; margin-bottom: 6px; }
.db-field input {
  width: 100%; box-sizing: border-box;
  background: #0a1424; border: 1px solid #1c2a42; color: #d8e5f5;
  padding: 10px 12px; border-radius: 8px;
  font-family: var(--mono, monospace); font-size: 13px; outline: none;
}
.db-field input:focus { border-color: #2f6fae; box-shadow: 0 0 0 3px rgba(47,111,174,0.2); }
.db-query { display: flex; align-items: center; gap: 10px; margin: 12px 0 16px; flex-wrap: wrap; }
.db-qlabel { color: #5f7ea8; font-size: 12px; white-space: nowrap; }
.db-query input {
  flex: 1; min-width: 180px;
  background: #0a1424; border: 1px solid #1c2a42; color: #d8e5f5;
  padding: 9px 12px; border-radius: 8px;
  font-family: var(--mono, monospace); font-size: 12.5px; outline: none;
}
.db-query input:focus { border-color: #2f6fae; box-shadow: 0 0 0 3px rgba(47,111,174,0.2); }
.db-table-wrap { border: 1px solid #1c2a42; border-radius: 10px; overflow: hidden; margin-bottom: 14px; background: #0e1a2e; }
.db-table-title {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 10px 14px; background: #101d33; color: #c9d7e8; font-size: 12.5px;
  border-bottom: 1px solid #1c2a42; flex-wrap: wrap;
}
.db-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.db-table th {
  text-align: left; padding: 8px 14px; color: #5f7ea8; font-weight: 600;
  font-size: 11px; letter-spacing: 1px; border-bottom: 1px solid #1c2a42; background: #0b1526;
}
.db-table td { padding: 9px 14px; border-bottom: 1px solid #14223a; color: #c9d7e8; line-height: 1.7; vertical-align: top; }
.db-table tbody tr:nth-child(even) td { background: #0b1628; }
.db-table tbody tr:hover td { background: #12213a; }
.db-tag {
  display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11px;
  color: #8fd6a0; border: 1px solid #1f4a2f; background: rgba(31,74,47,0.25);
}
.db-tag.red { color: #ff8a8a; border-color: #5c2f2f; background: rgba(92,47,47,0.25); }
.db-tag.amber { color: #ffd27a; border-color: #5c4a1f; background: rgba(92,74,31,0.25); }
.db-mask { color: #4a5b76; letter-spacing: 2px; }
.db-empty { text-align: center; color: #5f7ea8; padding: 40px 0; font-size: 13px; line-height: 2; }
.db-footer { color: #4a5b76; font-size: 11.5px; padding: 6px 2px; }
.db-alert {
  background: rgba(255,183,77,0.08); border: 1px solid rgba(255,183,77,0.35);
  color: #ffd27a; border-radius: 10px; padding: 12px 14px;
  font-size: 12.5px; line-height: 1.8; margin-bottom: 14px;
}
.db-app .divider { background: #1c2a42; }
.db-app .tag { border-color: #2f6fae; color: #7fd0ff; }
.db-app .tag.red { border-color: #5c2f2f; color: #ff8a8a; }
.db-app .tag.amber { border-color: #5c4a1f; color: #ffd27a; }
.db-app .cassette { background: #0e1a2e; border-color: #1c2a42; color: #c9d7e8; }
.db-app .cassette:hover { background: #12213a; border-color: #2f6fae; }
.db-app .enc-tape-card { background: rgba(14,26,46,0.8); border-color: #4a3f20; }
.db-app .pass-error { color: #ff8a8a; }
.score-bar {
  display: inline-block; height: 8px; border-radius: 4px;
  background: #1f4a75; vertical-align: middle;
}
.score-bar.red { background: #5c2f2f; }


.voice-privacy {
  font-size: 11.5px; color: var(--dim); background: rgba(108,92,231,.07);
  border: 1px dashed rgba(108,92,231,.35); border-radius: 10px;
  padding: 8px 12px; margin: 0 0 12px; line-height: 1.7; letter-spacing: .3px;
}
.voice-list { display: flex; flex-direction: column; gap: 12px; }
.voice-item {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 18px; display: flex; gap: 14px; align-items: center;
  background: rgba(255,255,255,0.3);
  transition: all 0.15s;
}
.voice-item:hover { background: #fff; border-color: var(--accent); }
.voice-item .vi-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: #edf2f7; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex-shrink: 0;
}
.voice-item.playing .vi-icon { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.voice-item .vi-name { font-size: 14px; font-weight: 500; }
.voice-item .vi-meta { font-size: 11.5px; color: var(--dim); margin-top: 4px; }
.waveform { display: flex; align-items: center; gap: 3px; height: 26px; margin-top: 8px; }
.waveform i { width: 4px; background: var(--accent-light); border-radius: 2px; height: 30%; }
.voice-item.playing .waveform i { animation: wave 0.7s infinite ease-in-out; }
.waveform i:nth-child(2n) { animation-delay: 0.15s; }
.waveform i:nth-child(3n){animation-delay:0.3s}
.waveform i:nth-child(4n){animation-delay:0.45s}
@keyframes wave { 0%,100%{height:20%} 50%{height:90%} }
.transcript {
  margin-top: 12px; background: #f7fafc; border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 18px;
  font-size: 13px; line-height: 2; color: var(--text-secondary);
  max-height: 220px; overflow-y: auto;
}
.transcript .t-label { font-size: 11px; color: var(--dim); letter-spacing: 1px; margin-bottom: 6px; font-weight: 600; }
.vp-panel {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 18px; margin-top: 14px; background: rgba(255,255,255,0.3);
}
.vp-panel select {
  background: #fff; border: 1px solid var(--line); color: var(--text);
  padding: 7px 10px; border-radius: 8px; font-size: 12.5px; outline: none;
  max-width: 46%;
}
.vp-result { margin-top: 10px; font-size: 12.5px; line-height: 1.9; color: var(--text-secondary); min-height: 20px; }
.vp-result .same { color: var(--accent); font-weight: 600; }
.vp-result .diff { color: var(--danger-dim); font-weight: 600; }


.cassette {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); background: #f7fafc;
  padding: 12px 16px; border-radius: 12px; cursor: pointer;
  transition: all 0.15s;
}
.cassette:hover { border-color: var(--accent); background: #fff; }
.cassette .cs-icon { font-size: 26px; }
.gunshot { text-align: center; color: var(--danger-dim); font-size: 15px; letter-spacing: 6px; margin-top: 10px; animation: pulse 1s infinite; }


#monitor-screen { flex-direction: column; gap: 16px; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); overflow-y: auto; justify-content: flex-start; padding: 30px 0; }
.monitor-inner { width: 880px; max-width: 94vw; }
.mon-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.mon-title { font-size: 17px; letter-spacing: 3px; color: #9fe8b8; font-family: var(--mono); }
.mon-live { font-size: 11px; color: #fc8181; border: 1px solid #feb2b2; border-radius: 4px; padding: 2px 8px; font-family: var(--mono); animation: pulse 1s infinite; }
.mon-clock { margin-left: auto; font-size: 12px; color: #a0aec0; font-family: var(--mono); }
.mon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.mon-cam {
  height: 158px; border-radius: 10px; position: relative; overflow: hidden;
  background: #0a120c; border: 1px solid #1e3a28;
}
.mon-cam.active { border-color: #48bb78; box-shadow: 0 0 20px rgba(72,187,120,0.2); }
.mon-cam.dead { opacity: 0.35; }
.mon-cam .mc-label { position: absolute; top: 6px; left: 10px; font-size: 10.5px; color: #a0aec0; font-family: var(--mono); }
.mon-cam .mc-time { position: absolute; top: 6px; right: 10px; font-size: 10px; color: #4a5568; font-family: var(--mono); }
.mon-cam .mc-scene { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; }
.mc-shelf { display: inline-flex; gap: 26px; }
.mc-shelf i { display: block; width: 54px; height: 40px; background: #1b2c20; border-top: 3px solid #24382a; }
.mc-person { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: 14px; height: 34px; background: #cde8d4; border-radius: 5px 5px 2px 2px; transition: left 1.2s ease; }
.mc-person.hidden-p { opacity: 0; }
.mon-cam .mc-cap { position: absolute; bottom: 6px; left: 10px; right: 10px; font-size: 11px; color: #a0aec0; font-family: var(--mono); text-shadow: 0 1px 3px #000; }
.mon-bottom { display: flex; gap: 14px; align-items: stretch; }
.mon-note {
  background: #0a120c; border: 1px solid #1e3a28; border-radius: 10px;
  padding: 10px 16px; font-size: 12px; color: #7fd6a0;
  font-family: var(--mono); margin-bottom: 12px; letter-spacing: 0.5px;
}
.mon-log {
  flex: 1; background: #0a120c; border: 1px solid #1e3a28;
  border-radius: 10px; padding: 12px 16px;
  font-size: 13px; line-height: 2; color: #c8d6e0;
  font-family: var(--mono); max-height: 46vh; overflow-y: auto;
}
.mon-actions { display: flex; flex-direction: column; gap: 8px; width: 250px; }
.mon-actions .btn { font-family: var(--mono); letter-spacing: 0.5px; }
.mon-static {
  position: absolute; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(0deg, #cfcfcf 0 2px, #222 2px 4px, #efefef 4px 5px, #333 5px 7px);
  animation: static-jitter 0.12s infinite; opacity: 0; transition: opacity 0.2s;
}
.mon-static.on { opacity: 0.85; }
@keyframes static-jitter { 0%{transform:translateY(0)} 100%{transform:translateY(-4px)} }


#newsburst-screen { flex-direction: column; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); overflow-y: auto; justify-content: flex-start; padding: 30px 0; }
.newsburst-inner { width: 860px; max-width: 94vw; }
.nb-tv {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.nb-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: linear-gradient(90deg, #fc8181, #e53e3e); }
.nb-live { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 2px; font-family: var(--mono); animation: pulse 1.2s infinite; }
.nb-chan { margin-left: auto; font-size: 11px; color: #fed7d7; font-family: var(--mono); letter-spacing: 1px; }
.nb-body { padding: 26px 34px 10px; }
.nb-tag { display: inline-block; font-size: 12px; color: #e53e3e; border: 1px solid #fc8181; border-radius: 4px; padding: 3px 10px; letter-spacing: 3px; margin-bottom: 14px; font-weight: 600; }
.nb-title { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.6; margin-bottom: 8px; }
.nb-sub { font-size: 12.5px; color: var(--dim); font-family: var(--mono); margin-bottom: 20px; }
.nb-metrics { display: flex; gap: 26px; padding: 12px 0 16px; border-top: 1px solid var(--line); }
.nb-metric .nm-num { font-size: 22px; font-weight: 700; color: var(--accent); font-family: var(--mono); }
.nb-metric .nm-label { font-size: 11px; color: var(--dim); }
.nb-comments { padding: 0 34px 26px; min-height: 170px; }
.nb-comment {
  background: #f7fafc; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 16px; margin-top: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.7;
  animation: nb-in 0.5s ease-out;
}
.nb-comment .nbc-user { font-size: 11px; color: var(--accent); font-family: var(--mono); margin-bottom: 3px; font-weight: 600; }
@keyframes nb-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.nb-continue { text-align: center; padding: 0 0 26px; }


.cms-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.3));
  border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cms-logo { font-size: 20px; font-weight: 700; letter-spacing: 1px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.cms-logo em { font-style: normal; color: var(--accent); }
.cms-role { font-size: 12px; color: var(--dim); letter-spacing: 0.5px; }

.cms-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.5px; color: var(--text-secondary);
  margin: 4px 0 12px; padding-left: 10px; border-left: 3px solid var(--accent);
}
.tip-card {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 14px; padding: 14px 18px; margin-bottom: 12px;
  background: rgba(255,255,255,0.55);
  transition: all 0.15s;
}
.tip-card:hover { background: #fff; border-color: var(--accent-light); box-shadow: var(--shadow-sm); }
.tip-card .tc-subject { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.tip-card .tc-meta { font-size: 11.5px; color: var(--dim); font-family: var(--mono); margin-bottom: 8px; line-height: 1.8; }
.tip-card .tc-body { font-size: 13.5px; line-height: 1.9; color: var(--text-secondary); }
.editor-area {
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  background: rgba(255,255,255,0.55);
}
.editor-area input,
.editor-area textarea {
  width: 100%; box-sizing: border-box; background: #fff;
  border: 1px solid var(--line); color: var(--text);
  padding: 10px 14px; border-radius: 10px;
  font-size: 13px; font-family: var(--font); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.editor-area input { margin-bottom: 10px; font-weight: 600; }
.editor-area textarea { min-height: 150px; resize: vertical; line-height: 1.8; }
.editor-area input:focus,
.editor-area textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }


.vp-note { font-size: 12px; color: var(--dim); margin-top: 8px; }
.search-loading { text-align: center; padding: 70px 0 90px; color: var(--dim); font-size: 13px; letter-spacing: 1px; }
.search-loading .sl-logo { font-size: 30px; margin-bottom: 16px; color: var(--accent); animation: pulse 1s infinite; font-family: var(--mono); }
.term-root { display: flex; flex-direction: column; height: 100%; background: #f7fafc; }
.term-head {
  padding: 8px 14px; background: #edf2f7; border-bottom: 1px solid var(--line);
  font-size: 11px; color: var(--dim); font-family: var(--mono); display: flex; gap: 14px; flex-shrink: 0;
}
.term-head .th-dot { width: 7px; height: 7px; border-radius: 50%; background: #48bb78; animation: pulse 1.6s infinite; margin-top: 4px; }
.term-body {
  flex: 1; overflow-y: auto; padding: 10px 14px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.9;
  color: var(--text-secondary);
}
.term-body::-webkit-scrollbar { width: 6px; }
.term-body::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }
.term-body .tl-time { color: var(--dim); margin-right: 8px; }
.term-body .tl-warn { color: #9c6b1a; }
.term-body .tl-err { color: #e53e3e; }
.term-body .tl-ok { color: #38a169; }


#ending-screen { flex-direction: column; overflow-y: auto; justify-content: flex-start; padding: 34px 0; }
.ending-tag { animation: pulse 2s infinite; }
.ending-body { text-align: left; font-size: 14.5px; line-height: 2.2; color: var(--text-secondary); margin: 24px 0 18px; }
.ending-tip { font-size: 12px; color: var(--dim); margin-top: 12px; line-height: 1.8; }
.ending-quote {
  font-size: 14px; color: var(--accent); font-style: italic; line-height: 2;
  border-left: 3px solid var(--accent); padding-left: 14px; margin-bottom: 30px; text-align: left;
}


#peephole-screen { flex-direction: column; gap: 22px; background: rgba(0,0,0,0.7); backdrop-filter: blur(12px); overflow-y: auto; justify-content: flex-start; padding: 40px 0; }
.peep-desc { color: #e2e8f0; font-size: 14px; max-width: 560px; text-align: center; line-height: 2; }
.peep-caption { color: #e2e8f0; font-size: 15px; letter-spacing: 1px; }
.peep-note {
  color: #a9c6dc; font-size: 13px; letter-spacing: 1px;
  padding: 6px 18px; border: 1px solid rgba(148,180,205,0.35); border-radius: 20px;
  background: rgba(255,255,255,0.05); font-family: var(--mono);
}


@media (max-width: 760px) {
  .window { min-width: 0; left: 6px !important; width: calc(100vw - 12px) !important; }
  .mail-list { width: 150px; }
  #icon-area { grid-template-columns: 70px; }
  .d-icon { width: 70px; }
  .intro-card, .ending-inner, .chapter-inner { padding: 30px 24px; }
  .diff-row { flex-direction: column; align-items: center; }
  .diff-btn { max-width: 100%; }
  .mon-grid { grid-template-columns: 1fr; }
  .mon-bottom { flex-direction: column; }
  .mon-actions { width: 100%; }
}

#toast-area {
  position: fixed; right: 24px; bottom: 96px; z-index: 99999;
  display: flex; flex-direction: column; gap: 10px;
  width: 340px; max-width: calc(100vw - 48px);
  pointer-events: none;
}
.toast {
  pointer-events: auto; cursor: pointer;
  position: relative;
  background: rgba(28, 32, 44, 0.92); backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 12px 14px;
  color: #eef2f7; font-size: 13px; line-height: 1.6;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  transform: translateX(20px); opacity: 0;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s;
}
.toast .t-close {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: #aab4c4;
  font-size: 11px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .15s, color .15s, transform .15s;
}
.toast .t-close:hover { background: rgba(255,255,255,0.22); color: #fff; transform: scale(1.08); }
.toast.show, .toast:not(.out) { transform: translateX(0); opacity: 1; }
.toast.out { transform: translateX(20px); opacity: 0; }
.toast .t-title {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13.5px; font-weight: 600; margin-bottom: 4px; color: #fff;
  padding-right: 26px;
}
.toast .t-title span:last-child { opacity: .5; font-size: 10px; }
.toast .t-body { font-size: 12.5px; color: #c6cede; }
.toast.warn { border-color: rgba(255,180,60,0.4); }
.toast.warn .t-title { color: #ffd27a; }
.toast.danger { border-color: rgba(255,90,90,0.45); }
.toast.danger .t-title { color: #ff9a9a; }


.chapter-banner {
  position: fixed; top: 24px; left: 50%; transform: translate(-50%, -24px);
  z-index: 99998; text-align: center; pointer-events: none;
  opacity: 0; transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1);
  padding: 18px 40px; border-radius: 14px;
  background: rgba(20, 26, 40, 0.85); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 36px rgba(0,0,0,0.4);
  max-width: 90vw;
}
.chapter-banner.show { opacity: 1; transform: translate(-50%, 0); }
.chapter-banner .cb-tag {
  font-size: 10.5px; letter-spacing: 4px; color: #7fb8ff; font-weight: 700;
  font-family: var(--mono, monospace); margin-bottom: 6px;
}
.chapter-banner .cb-title { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: 2px; }
.chapter-banner .cb-desc { font-size: 12.5px; color: #b8c4d8; margin-top: 6px; }
.time-banner {
  position: fixed; top: 24px; left: 50%; transform: translate(-50%, -24px);
  z-index: 99997; text-align: center; pointer-events: none;
  opacity: 0; transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1);
  padding: 12px 30px; border-radius: 999px;
  background: rgba(20, 26, 40, 0.85); backdrop-filter: blur(20px);
  border: 1px solid rgba(120, 180, 255, 0.35);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  font-size: 14px; color: #cfe4ff;
}
.time-banner.show { opacity: 1; transform: translate(-50%, 0); }
.time-banner .tb-date { font-weight: 700; color: #fff; }


.mini-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--ic, #5aa9e6), var(--icg, rgba(90,169,230,.45)));
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  vertical-align: middle; margin-right: 6px;
}
.mini-ic svg { width: 12px; height: 12px; }
.win-titlebar .mini-ic { margin-right: 7px; }
.tb-win .mini-ic { margin-right: 5px; width: 18px; height: 18px; }
.tb-win .mini-ic svg { width: 11px; height: 11px; }


.window.maximized {
  left: 8px !important; top: 8px !important;
  width: calc(100vw - 16px) !important; height: calc(100vh - 72px) !important;
  border-radius: 0 !important;
}
.win-resize {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  cursor: nwse-resize; z-index: 6;
  background:
    linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.18) 50%, rgba(0,0,0,0.18) 60%, transparent 60%, transparent 70%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0.18) 80%, transparent 80%);
}
.window.maximized .win-resize { display: none; }


.rt-sep { opacity: .4; margin: 0 4px; }
.remote-walltag {
  font-size: 11px; color: #7fb8c8; margin-bottom: 14px;
  letter-spacing: 2px; font-family: var(--mono, monospace);
}
.remote-desktop-grid { display: flex; flex-wrap: wrap; gap: 22px 26px; }
.remote-dock {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: #151a22; border-top: 1px solid #2a3340;
  font-size: 12px; color: #9aa7b8;
}
.rd-item {
  padding: 5px 12px; border-radius: 6px; cursor: default;
  display: inline-flex; align-items: center; gap: 4px; transition: background .15s;
}
.rd-item:hover { background: rgba(255,255,255,.07); }
.rd-spacer { flex: 1; }
.rd-close { color: #ff8a8a; cursor: pointer; }
.rd-close:hover { background: rgba(255,90,90,.15); }


.chat-app.tg { background: #0e1621; }
.tg-head {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: #17212b; border-bottom: 1px solid #101921;
}
.tg-head .ch-info { flex: 1; }
.tg-head .ch-name { color: #fff; font-size: 14.5px; font-weight: 600; }
.tg-head .ch-status { color: #6bc76b; font-size: 11.5px; margin-top: 1px; display: flex; align-items: center; gap: 4px; }
.tg-head .ch-actions { display: flex; gap: 14px; color: #7a8a9a; font-size: 16px; }
.tg-head .ch-actions span { cursor: pointer; }
.tg-scroll {
  background:
    radial-gradient(circle at 20% 20%, rgba(74,179,244,.05), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(74,179,244,.05), transparent 40%),
    #0e1621;
}
.tg-bubble { position: relative; }
.chat-bubble.tg-bubble.them {
  background: #182533; color: #e6eef5; border-radius: 4px 14px 14px 14px; border: none;
}
.chat-bubble.tg-bubble.right {
  background: #2b5278; color: #fff; border-radius: 14px 4px 14px 14px; border: none;
}
.tg-inputbar { background: #17212b; border-top: 1px solid #101921; }


.chat-app { display: flex; flex-direction: column; height: 100%; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 14px 16px; }
.chat-row { display: flex; align-items: flex-end; margin-bottom: 10px; gap: 8px; }
.chat-row.right { flex-direction: row-reverse; }
.chat-bubble { max-width: 72%; padding: 7px 11px; border-radius: 12px; line-height: 1.55; font-size: 13.5px; word-break: break-word; color: #eaf3fa; }
.cb-sender { font-size: 11px; color: #7ec6ff; margin-bottom: 3px; font-weight: 600; }
.chat-day { text-align: center; color: #5f7a8a; font-size: 11.5px; margin: 10px 0; }
.envelope { text-align: center; color: #9fb8c8; font-size: 12.5px; margin: 12px 0; }
.chat-inputbar { padding: 10px 16px; }
.chat-inputbar .btn { margin-right: 8px; }
.tg-bubble.them, .chat-bubble.tg-bubble.them { color: #eaf3fa; }
.chat-row.me, .chat-row.right { flex-direction: row-reverse; }
.chat-bubble.tg-bubble.me, .chat-bubble.tg-bubble.right {
  background: #2b5278; color: #fff; border-radius: 14px 4px 14px 14px; border: none;
}
.voice-msg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9fd0ff; margin: 2px 0 6px; }
.voice-wave { display: inline-flex; gap: 2px; align-items: flex-end; }
.voice-wave::before { content: "▂▄▆▄▂"; letter-spacing: 2px; font-size: 11px; }
.voice-transcript { font-size: 13px; color: #dfe9f1; line-height: 1.6; padding: 6px 0; border-top: 1px dashed #2c3e50; margin-top: 4px; }
.voice-saved { font-size: 11px; color: #6bc76b; margin-top: 6px; }

.enc-tape-card {
  background: rgba(255,255,255,0.5); border: 1px dashed #b8a060; border-radius: 10px;
  padding: 14px 16px; margin-top: 6px;
}



.obs-nav{background:#141414;border-bottom:3px solid #e23b3b}
.obs-nav-inner{display:flex;align-items:center;gap:22px;padding:12px 26px}
.obs-brand{display:flex;align-items:center;gap:12px}
.obs-logo{width:40px;height:40px;border-radius:8px;background:#e23b3b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.obs-brand-name{color:#fff;font-size:17px;font-weight:800;letter-spacing:1px}
.obs-brand-sub{color:#9a9a9a;font-size:10px;letter-spacing:2px}
.obs-links{display:flex;gap:18px;flex:1}
.obs-links a{color:#ccc;font-size:13px;cursor:pointer;padding:4px 2px;border-bottom:2px solid transparent}
.obs-links a.active{color:#fff;border-bottom-color:#e23b3b}
.obs-links a:hover{color:#fff}
.obs-nav-search{display:flex;align-items:center;gap:6px;background:#2a2a2a;border-radius:6px;padding:6px 10px;color:#888}
.obs-nav-search input{background:transparent;border:0;outline:0;color:#ddd;width:120px;font-size:12px}
.obs-accent{height:0}
.obs-hero{background:linear-gradient(135deg,#141414,#2a0d0d);color:#fff;padding:44px 32px}
.obs-hero-inner{max-width:820px;margin:0 auto}
.obs-hero-kicker{color:#e23b3b;font-size:12px;letter-spacing:3px;margin-bottom:10px}
.obs-hero h1{font-size:30px;font-weight:800;margin-bottom:12px;line-height:1.3}
.obs-hero p{color:#c9c9c9;font-size:14px;line-height:1.9}
.obs-footer{background:#141414;color:#bbb;margin-top:0}
.obs-footer-inner{display:flex;justify-content:space-between;gap:30px;padding:28px 32px;flex-wrap:wrap}
.obs-footer-brand{color:#fff;font-size:16px;font-weight:800;margin-bottom:8px}
.obs-footer-note{font-size:12px;color:#888;line-height:1.8;max-width:360px}
.obs-footer-cols{display:flex;gap:40px}
.obs-footer-cols h5{color:#fff;font-size:12px;margin-bottom:8px}
.obs-footer-cols a{display:block;color:#999;font-size:12px;padding:3px 0;cursor:pointer}
.obs-footer-cols a:hover{color:#fff}
.obs-footer-bottom{border-top:1px solid #2a2a2a;padding:14px 32px;font-size:11px;color:#666}


.wiki-top{background:#fff;border-bottom:1px solid #a2a9b1;padding:10px 0}
.wiki-top-inner{display:flex;align-items:center;gap:20px;padding:0 24px}
.wiki-brand{display:flex;align-items:center;gap:10px}
.wiki-logo{width:36px;height:36px;border-radius:50%;background:linear-gradient(#5b8dd9,#1a4fa0);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.wiki-brand-name{font-size:16px;font-weight:600;color:#000}
.wiki-brand-sub{font-size:11px;color:#54595d}
.wiki-search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;border:1px solid #a2a9b1;border-radius:2px;padding:5px 10px}
.wiki-search input{flex:1;border:0;outline:0;font-size:13px}
.wiki-top-links{display:flex;gap:16px;font-size:12.5px;color:#36c}
.wiki-top-links a{cursor:pointer}
.wiki-body{display:flex;background:#fff;padding:20px 24px;gap:28px}
.wiki-main{flex:1;min-width:0}
.wiki-breadcrumb{font-size:11px;color:#54595d;margin-bottom:6px}
.wiki-h1{font-size:28px;font-weight:400;color:#000;border-bottom:1px solid #a2a9b1;padding-bottom:6px;font-family:Georgia,serif}
.wiki-tabrow{display:flex;gap:16px;margin:6px 0 18px;font-size:13px}
.wiki-tab{color:#36c;cursor:pointer;padding-bottom:4px;border-bottom:2px solid transparent}
.wiki-tab.active{color:#000;border-bottom-color:#000;cursor:default}
.wiki-tab.right{margin-left:auto}
.wiki-main p{font-size:14px;line-height:1.8;color:#202124;margin-bottom:14px}
.wiki-h2{font-size:20px;font-family:Georgia,serif;color:#000;border-bottom:1px solid #a2a9b1;padding-bottom:4px;margin:22px 0 12px}
.wiki-h3{font-size:16px;margin:16px 0 8px}
.wiki-infobox{float:right;width:240px;margin:0 0 16px 24px;background:#f8f9fa;border:1px solid #a2a9b1;padding:10px;font-size:12px}
.wiki-ib-title{font-weight:700;text-align:center;font-size:14px;background:#d9e8ff;padding:5px;margin:-10px -10px 8px}
.wiki-ib-img{font-size:48px;text-align:center;padding:14px 0;background:#fff;border:1px solid #ccc;margin-bottom:8px}
.wiki-infobox table{width:100%;border-collapse:collapse}
.wiki-infobox th{text-align:left;color:#54595d;padding:3px 6px;vertical-align:top;width:60px;font-weight:400}
.wiki-infobox td{padding:3px 6px}
.wiki-refs{clear:both;margin-top:24px;font-size:12.5px}
.wiki-refs ol{padding-left:20px;color:#54595d}
.wiki-toc{width:180px;flex-shrink:0;font-size:13px}
.wiki-toc-title{font-weight:600;margin-bottom:8px}
.wiki-toc-item{color:#36c;padding:3px 0;cursor:pointer}
@media(max-width:720px){.wiki-infobox{float:none;width:auto}.wiki-toc{display:none}.obs-links{display:none}}



.doc-reader { display: flex; flex-direction: column; background: #f1f3f5; }
.doc-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: #e9edf1; border-bottom: 1px solid #d5dbe2;
  font-size: 12px; color: #4a5568; flex: none;
}
.doc-file { font-weight: 600; }
.doc-tag {
  background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
  border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 600;
}
.doc-page {
  flex: 1; overflow: auto; margin: 14px; padding: 28px 34px;
  background: #fff; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.08);
  color: #1a202c; line-height: 1.9; font-size: 14px;
}
.doc-title { font-size: 22px; font-weight: 700; text-align: center; letter-spacing: 1px; }
.doc-sub { text-align: center; color: #718096; font-size: 13px; margin: 4px 0 10px; }
.doc-byline { text-align: center; color: #a0aec0; font-size: 12px; margin-bottom: 6px; }
.doc-hr { border: none; border-top: 1px solid #e2e8f0; margin: 14px 0; }
.doc-chapter { font-size: 15px; margin: 14px 0 8px; color: #2d3748; }
.doc-page p { text-indent: 2em; margin: 0 0 10px; }
.doc-end {
  text-align: center; color: #a0aec0; font-size: 12px; margin-top: 22px;
  border-top: 1px dashed #e2e8f0; padding-top: 14px;
}


.hc-doc-overlay {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(10, 14, 24, 0.55); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 30px;
  animation: hire-in .25s ease-out;
}
.hc-doc-box {
  width: 720px; max-width: 92%; height: 86%; max-height: 640px;
  display: flex; flex-direction: column;
  background: #f1f3f5; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.hc-doc-box .doc-reader { flex: 1; min-height: 0; }
.hc-doc-close { margin: 10px 12px; align-self: flex-end; }
.hrb-link {
  color: #00be6c; cursor: pointer; font-weight: 700;
  border-bottom: 1px dashed #00be6c; margin-left: 4px;
}
.hrb-link:hover { color: #00563a; border-color: #00563a; }


/* ==== SVG 图形图标通用规则（单字字形已替换为矢量图标） ==== */
.fc-icon svg, .rf-icon svg, .ms-stat-icon svg, .ms-alert-icon svg,
.sb-icon svg, .t-ic svg, .at-ic svg, .ns-ic svg,
.fb-searchbar svg, .wiki-search svg, .mail-search svg,
.db-tab svg, .nb-tag svg, .hint-box svg, .doc-file svg,
.ci-title svg, .web-header h2 svg, .btn svg, .db-alert svg,
.fp-author svg, .se-searchbox svg, .app-title svg {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.16em; flex-shrink: 0;
}
.ms-card-icon svg { width: 1em; height: 1em; display: block; margin: 0 auto; }
.ms-card-icon { color: #fff; }
.ms-nav-logo svg { width: 18px; height: 18px; }
.remote-folder .rf-icon svg { width: 36px; height: 36px; }
.ms-nav-search svg, .obs-nav-search svg { color: #9aa0a6; }