/* ==========================================================================
   星际留言板 · Cosmic Message Board
   ========================================================================== */

:root{
  --bg-0:#03040c;
  --bg-1:#070b1e;
  --bg-2:#0d1233;

  --glass-bg:rgba(16,21,45,.46);
  --glass-bg-strong:rgba(14,19,42,.68);
  --glass-border:rgba(255,255,255,.14);
  --glass-border-strong:rgba(255,255,255,.24);
  --glass-blur:18px;

  --text:#eaf0ff;
  --text-dim:#a8b3d6;
  --text-mute:#7c87ab;

  --cyan:#6fe9ff;
  --violet:#b18cff;
  --gold:#ffd479;
  --pink:#ff8fd0;
  --danger:#ff7a8a;

  --accent-grad:linear-gradient(135deg,#6fe9ff 0%,#b18cff 55%,#ff8fd0 100%);

  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-lg:0 30px 80px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.05) inset;
  --shadow-md:0 18px 45px -16px rgba(0,0,0,.7);

  --sidebar-w:288px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

/* 关键：必须显式声明，否则 hidden 属性会失效。
   浏览器默认样式表里的 [hidden]{display:none} 属于「用户代理样式」，
   而作者样式（.btn{display:inline-flex} 等）优先级永远高于它——
   结果是带 hidden 属性的按钮照样显示。
   管理员入口、管理员删除按钮都依赖这条规则来隐藏。 */
[hidden]{display:none !important}

html,body{height:100%}

body{
  margin:0;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
  background:var(--bg-0);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button,input,select,textarea{font:inherit;color:inherit}

::selection{background:rgba(177,140,255,.4)}

/* ------------------------------ 滚动条 ------------------------------ */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26)}

/* ==========================================================================
   宇宙背景
   ========================================================================== */
.space-bg{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(1200px 800px at 78% -10%, #1b2359 0%, transparent 60%),
    radial-gradient(900px 700px at 8% 105%, #241a4d 0%, transparent 62%),
    radial-gradient(140% 120% at 50% 50%, var(--bg-2) 0%, var(--bg-1) 42%, var(--bg-0) 100%);
}

.nebula{
  position:absolute;border-radius:50%;
  filter:blur(80px);opacity:.55;
  mix-blend-mode:screen;
  will-change:transform;
}
.nebula--1{
  width:52vw;height:52vw;left:-12vw;top:-14vw;
  background:radial-gradient(circle at 35% 35%, rgba(111,233,255,.42), rgba(111,233,255,0) 68%);
  animation:drift1 46s ease-in-out infinite;
}
.nebula--2{
  width:60vw;height:60vw;right:-18vw;top:8vh;
  background:radial-gradient(circle at 60% 40%, rgba(177,140,255,.42), rgba(177,140,255,0) 70%);
  animation:drift2 62s ease-in-out infinite;
}
.nebula--3{
  width:46vw;height:46vw;left:26vw;bottom:-22vw;
  background:radial-gradient(circle at 50% 50%, rgba(255,143,208,.30), rgba(255,143,208,0) 70%);
  animation:drift3 54s ease-in-out infinite;
}

@keyframes drift1{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6vw,4vh,0) scale(1.12)}
}
@keyframes drift2{
  0%,100%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(-5vw,6vh,0) scale(.94)}
}
@keyframes drift3{
  0%,100%{transform:translate3d(0,0,0) scale(.96)}
  50%{transform:translate3d(4vw,-5vh,0) scale(1.14)}
}

/* 银河尘埃 / 噪点 */
.grain{
  position:absolute;inset:-50%;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)}
  75%{transform:translate(2%,2%)}
  100%{transform:translate(0,0)}
}

/* ==========================================================================
   星空画布
   ========================================================================== */
#starfield{
  position:fixed;inset:0;z-index:1;
  display:block;width:100%;height:100%;
  cursor:crosshair;
  touch-action:manipulation;
}
body.is-over-star #starfield{cursor:pointer}

/* ==========================================================================
   玻璃拟态基础
   ========================================================================== */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(170%);
  backdrop-filter:blur(var(--glass-blur)) saturate(170%);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-md);
}

/* ==========================================================================
   按钮
   ========================================================================== */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;
  border-radius:var(--radius-md);
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-size:14px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;
  overflow:hidden;
  transition:transform .22s var(--ease), background .22s, border-color .22s, box-shadow .22s, opacity .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.11);border-color:var(--glass-border-strong)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.btn--primary{
  background:var(--accent-grad);
  background-size:200% 200%;
  border:none;
  color:#08111f;
  font-weight:800;
  box-shadow:0 10px 30px -10px rgba(111,233,255,.6), 0 0 0 1px rgba(255,255,255,.22) inset;
  animation:gradShift 7s ease infinite;
}
.btn--primary:hover{box-shadow:0 16px 42px -12px rgba(177,140,255,.75), 0 0 0 1px rgba(255,255,255,.3) inset}
@keyframes gradShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.btn--ghost{background:rgba(255,255,255,.045)}
.btn--sm{padding:7px 12px;font-size:12.5px;border-radius:var(--radius-sm)}
.btn--danger{color:var(--danger);border-color:rgba(255,122,138,.35);background:rgba(255,122,138,.08)}
.btn--danger:hover{background:rgba(255,122,138,.16)}

.btn__icon{font-size:15px;line-height:1}
.btn__shine{
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);
  transform:translateX(-130%);
  pointer-events:none;
}
.btn:hover .btn__shine{animation:shine .9s var(--ease)}
@keyframes shine{to{transform:translateX(130%)}}

.icon-btn{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,.06);
  font-size:20px;line-height:1;color:var(--text-dim);
  cursor:pointer;transition:.2s var(--ease);
}
.icon-btn:hover{background:rgba(255,122,138,.18);color:#fff;transform:rotate(90deg)}

/* ==========================================================================
   侧边栏
   ========================================================================== */
.sidebar{
  position:fixed;z-index:20;
  top:18px;left:18px;bottom:18px;
  width:var(--sidebar-w);
  display:flex;flex-direction:column;
  gap:14px;
  padding:20px 16px 16px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  transition:transform .5s var(--ease), opacity .4s;
}
.sidebar.is-hidden{transform:translateX(calc(-100% - 30px));opacity:0;pointer-events:none}

.brand{display:flex;align-items:center;gap:12px}
.brand__mark{
  width:44px;height:44px;flex:0 0 44px;
  display:grid;place-items:center;
  font-size:22px;
  border-radius:14px;
  background:linear-gradient(140deg,rgba(111,233,255,.22),rgba(177,140,255,.28));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 26px -6px rgba(111,233,255,.6);
  animation:pulseMark 4.5s ease-in-out infinite;
}
@keyframes pulseMark{
  0%,100%{box-shadow:0 0 22px -8px rgba(111,233,255,.55)}
  50%{box-shadow:0 0 34px -4px rgba(177,140,255,.8)}
}
.brand__text h1{margin:0;font-size:17px;font-weight:800;letter-spacing:.03em}
.brand__text p{margin:3px 0 0;font-size:9px;letter-spacing:.22em;color:var(--text-mute)}

.btn--compose{width:100%;padding:14px;font-size:15px}

/* 数据来源指示 */
.status-pill{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:99px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--text-dim);
  cursor:default;user-select:none;
}
.status-pill__dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:var(--text-mute)}
.status-pill--online{color:#bdf6ff;border-color:rgba(111,233,255,.35);background:rgba(111,233,255,.1)}
.status-pill--online .status-pill__dot{background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:blink 2.6s ease-in-out infinite}
.status-pill--offline{color:#ffd9a8;border-color:rgba(255,212,121,.3);background:rgba(255,212,121,.08)}
.status-pill--offline .status-pill__dot{background:var(--gold);box-shadow:0 0 10px rgba(255,212,121,.8)}
.status-pill--checking .status-pill__dot{animation:blink 1s ease-in-out infinite}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{
  padding:10px 8px;text-align:center;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}
.stat strong{display:block;font-size:19px;font-weight:800;
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:10.5px;color:var(--text-mute);letter-spacing:.06em}

.search{position:relative}
.search__icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.6;pointer-events:none}
.search input{
  width:100%;padding:9px 12px 9px 32px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  font-size:12.5px;outline:none;
  transition:.2s;
}
.search input::placeholder{color:var(--text-mute)}
.search input:focus{border-color:rgba(111,233,255,.6);background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(111,233,255,.12)}
.search input::-webkit-search-cancel-button{filter:invert(1);opacity:.5}

.list-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:11px;letter-spacing:.14em;color:var(--text-mute);
  text-transform:uppercase;
  padding:0 2px;
}
.list-head__hint{letter-spacing:0;text-transform:none;font-size:10.5px;opacity:.7}

.msg-list{
  list-style:none;margin:0;padding:2px 2px 2px 0;
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:8px;
  scrollbar-gutter:stable;
}

.msg-item{
  position:relative;
  display:flex;gap:10px;align-items:flex-start;
  padding:10px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.035);
  cursor:pointer;
  transition:.24s var(--ease);
  animation:itemIn .45s var(--ease) both;
}
@keyframes itemIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.msg-item:hover{background:rgba(255,255,255,.09);border-color:rgba(111,233,255,.35);transform:translateX(3px)}
.msg-item.is-active{background:rgba(177,140,255,.16);border-color:rgba(177,140,255,.5)}

.msg-item__flag{font-size:18px;line-height:1.1;flex:0 0 auto}
.msg-item__body{min-width:0;flex:1}
.msg-item__top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.msg-item__nick{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-item__time{font-size:10px;color:var(--text-mute);flex:0 0 auto}
.msg-item__text{
  margin:3px 0 0;font-size:11.5px;line-height:1.5;color:var(--text-dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.msg-item__place{margin:4px 0 0;font-size:10px;color:var(--text-mute)}
.msg-item__mine{
  position:absolute;bottom:8px;right:8px;
  font-size:9px;padding:1px 5px;border-radius:99px;
  background:rgba(111,233,255,.2);color:var(--cyan);border:1px solid rgba(111,233,255,.4);
}
.list-empty{
  padding:26px 12px;text-align:center;font-size:12px;color:var(--text-mute);line-height:1.9;
}

/* 分页：上万条留言时侧边栏只渲染一页，翻页再取 */
.list-more{width:100%;flex:0 0 auto;padding:9px;font-size:12px}
.list-more[hidden]{display:none}

.sidebar__foot{display:flex;gap:6px}
.sidebar__foot .btn{flex:1;padding:7px 4px;font-size:11.5px;white-space:nowrap}
.sidebar__foot .btn.is-active{
  color:var(--cyan);
  border-color:rgba(111,233,255,.5);
  background:rgba(111,233,255,.14);
}

.sidebar-toggle{
  position:fixed;z-index:30;top:20px;left:calc(var(--sidebar-w) + 30px);
  width:40px;height:40px;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  transition:left .5s var(--ease), background .2s, transform .2s;
}
.sidebar-toggle span{
  display:block;width:18px;height:2px;border-radius:2px;background:var(--text-dim);
  transition:transform .3s var(--ease), opacity .3s var(--ease), background .2s;
}
.sidebar-toggle span+span{margin-top:4px}
.sidebar-toggle:hover span{background:var(--cyan)}
.sidebar-toggle[aria-expanded="false"]{left:18px}
.sidebar-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.sidebar-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.sidebar-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ==========================================================================
   顶部提示条
   ========================================================================== */
.hint-bar{
  position:fixed;z-index:15;top:22px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:99px;
  font-size:12px;color:var(--text-dim);
  animation:hintIn .8s var(--ease) both .6s;
  transition:opacity .4s, transform .4s;
  max-width:min(560px,calc(100vw - 40px));
}
.hint-bar.is-gone{opacity:0;transform:translate(-50%,-14px);pointer-events:none}
@keyframes hintIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
.hint-bar__dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 7px;
  background:var(--cyan);box-shadow:0 0 12px var(--cyan);
  animation:blink 1.8s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.hint-bar__close{
  background:none;border:none;font-size:16px;color:var(--text-mute);cursor:pointer;padding:0 2px;line-height:1;
}
.hint-bar__close:hover{color:#fff}

/* ==========================================================================
   对话框
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal__backdrop{
  position:absolute;inset:0;
  background:rgba(3,5,14,.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  animation:fadeIn .3s ease both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.dialog{
  position:relative;
  width:min(560px,100%);
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  padding:24px;
  border-radius:var(--radius-lg);
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--glass-border-strong);
  box-shadow:var(--shadow-lg);
  animation:dialogIn .5s var(--ease) both;
}
@keyframes dialogIn{
  from{opacity:0;transform:translateY(26px) scale(.94)}
  to{opacity:1;transform:none}
}
.dialog__glow{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,143,208,.18),
    inset 0 0 70px rgba(111,233,255,.09);
}

.dialog__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px}
.dialog__head h2{margin:0;font-size:20px;font-weight:800;letter-spacing:.02em}
.dialog__sub{margin:6px 0 0;font-size:12px;color:var(--text-mute)}

.form{display:flex;flex-direction:column;gap:15px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field-row{display:grid;grid-template-columns:1.15fr 1fr;gap:14px}
.field label{font-size:12px;font-weight:600;color:var(--text-dim);letter-spacing:.04em}
.field label em{color:var(--pink);font-style:normal}

.control{position:relative;display:flex;align-items:center}
.control input,.control textarea,.control select{
  width:100%;
  padding:11px 14px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  color:var(--text);
  font-size:14px;
  outline:none;
  transition:.22s var(--ease);
  resize:none;
}
.control textarea{padding-bottom:26px;line-height:1.6;min-height:96px}
.control input::placeholder,.control textarea::placeholder{color:var(--text-mute)}
.control input:focus,.control textarea:focus,.control select:focus{
  border-color:rgba(111,233,255,.65);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 4px rgba(111,233,255,.12);
}
.control input.is-invalid,.control textarea.is-invalid,.control select.is-invalid{
  border-color:rgba(255,122,138,.75);
  box-shadow:0 0 0 4px rgba(255,122,138,.12);
}
.control--select::after{
  content:"▾";position:absolute;right:14px;pointer-events:none;color:var(--text-mute);font-size:12px;
}
.control select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer}
.control select option{background:#0d1233;color:var(--text)}

.counter{
  position:absolute;right:12px;bottom:8px;
  font-size:10px;color:var(--text-mute);pointer-events:none;
}
.err{margin:0;font-size:11px;color:var(--danger);min-height:0;opacity:0;transition:opacity .2s}
.err.is-show{opacity:1}

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

.meta-line{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:var(--radius-md);
  background:rgba(111,233,255,.07);
  border:1px dashed rgba(111,233,255,.3);
  font-size:12px;color:var(--text-dim);
}
.meta-line strong{color:var(--cyan);font-weight:700;letter-spacing:.02em}

.dialog__foot{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.dialog__foot .btn--primary{padding:11px 22px}

/* ==========================================================================
   悬浮预览面板
   ========================================================================== */
.tip{
  position:fixed;z-index:40;top:0;left:0;
  width:min(276px,calc(100vw - 32px));
  padding:13px 14px;
  border-radius:var(--radius-md);
  background:rgba(12,17,38,.72);
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,0,0) scale(.94);
  transition:opacity .18s ease, transform .18s var(--ease);
  will-change:transform;
}
.tip[hidden]{display:none}
.tip.is-show{opacity:1}
.tip__head{display:flex;gap:9px;align-items:center}
.tip__flag{font-size:19px;line-height:1}
.tip__who{min-width:0}
.tip__who strong{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tip__who span{font-size:10.5px;color:var(--text-mute)}
.tip__text{
  margin:9px 0 0;font-size:12px;line-height:1.6;color:var(--text-dim);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.tip__foot{
  display:flex;justify-content:space-between;gap:8px;align-items:center;
  margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);
  font-size:10px;color:var(--text-mute);
}
.tip__cta{color:var(--cyan)}

/* ==========================================================================
   详情卡片
   ========================================================================== */
.detail{
  position:fixed;z-index:45;right:20px;bottom:20px;
  width:min(340px,calc(100vw - 40px));
  padding:20px;
  border-radius:var(--radius-lg);
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-border-strong);
  box-shadow:var(--shadow-lg);
  animation:detailIn .45s var(--ease) both;
}
.detail[hidden]{display:none}
@keyframes detailIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.detail__close{position:absolute;top:12px;right:12px}
.detail__head{display:flex;gap:12px;align-items:center;padding-right:38px}
.detail__flag{font-size:28px;line-height:1}
.detail__head strong{display:block;font-size:16px;font-weight:800}
.detail__place{font-size:11.5px;color:var(--text-mute)}
.detail__text{
  margin:16px 0;padding:12px 14px;
  font-size:13.5px;line-height:1.75;color:var(--text);
  background:rgba(255,255,255,.05);
  border-left:3px solid var(--violet);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  white-space:pre-wrap;word-break:break-word;
  max-height:30vh;overflow-y:auto;
}
.detail__meta{margin:0 0 16px;display:flex;flex-direction:column;gap:7px}
.detail__meta>div{display:flex;justify-content:space-between;gap:12px;font-size:11.5px}
.detail__meta dt{color:var(--text-mute);flex:0 0 auto}
.detail__meta dd{margin:0;color:var(--text-dim);text-align:right;word-break:break-all}
.detail__foot{display:flex;gap:8px;justify-content:flex-end}

/* ==========================================================================
   Toast
   ========================================================================== */
.toasts{
  position:fixed;z-index:80;bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:10px;align-items:center;
  pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:10px;
  padding:11px 18px;border-radius:99px;
  font-size:13px;font-weight:600;
  background:rgba(14,19,42,.85);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--glass-border-strong);
  box-shadow:var(--shadow-md);
  animation:toastIn .45s var(--ease) both;
  max-width:min(90vw,460px);
}
.toast.is-out{animation:toastOut .35s var(--ease) both}
.toast--ok{border-color:rgba(111,233,255,.5);color:#dffaff}
.toast--err{border-color:rgba(255,122,138,.5);color:#ffe4e8}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(12px) scale(.96)}}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:820px){
  :root{--sidebar-w:262px}
  .sidebar{top:12px;left:12px;bottom:12px;padding:16px 13px 13px}
  .sidebar-toggle{top:14px;left:calc(var(--sidebar-w) + 24px)}
  .hint-bar{display:none}
  .detail{right:12px;left:12px;bottom:12px;width:auto}
  .field-row{grid-template-columns:1fr}
  .dialog{padding:20px 16px}
}
@media (max-width:480px){
  .sidebar{width:calc(100vw - 24px)}
  .sidebar-toggle{left:auto;right:12px;top:14px}
  .sidebar-toggle[aria-expanded="true"]{left:auto;right:12px}
  .toasts{bottom:14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.06s !important}
  .nebula{animation:none}
}