/* =========================
   CloudDock Dashboard – Clean Merge
   ========================= */

/* ---------- 基础/变量 ---------- */
:root{
  --hdr-h: 64px;             /* 顶部导航高度（通知用） */
  --toast-life: 5s;          /* 右上角 toast 停留 */
  --toast-out: .25s;         /* toast 淡出 */
  --inline-life: 5s;         /* 内联成功脉冲停留 */
}

/* ---------- 通用 ---------- */
body{
  margin:0;
  font-family: Arial, sans-serif;
  background:#f4f4f4;
  text-align:center;
}
h1,h2,p{ margin:.5em 0; }
input,button{ border-radius:8px; padding:6px 10px; border:1px solid #ccc; }
.hidden{ display: none !important; }

/* ---------- 入场遮罩/动画（合并一处） ---------- */
#entry-screen{
  position:fixed; inset:0;
  background:#000; color:#fff;
  z-index:100000;             /* 统一最高层级 */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  animation: entry-fadeout .6s ease forwards;
  animation-delay: 5.2s;      /* 保留你原始延迟 */
  pointer-events:none;        /* 不阻挡点击 */
}
#entry-center{ position:relative; }
#entry-subtitle{ position:absolute; top:76%; font-size:1rem; opacity:.8; }
#entry-footer{ position:absolute; bottom:5%; font-size:.85rem; color:#aaa; }

/* 统一滑入 */
@keyframes name-slide{ 0%{opacity:0; transform:translateX(-16px)} 100%{opacity:1; transform:none} }

/* 组合标识 */
.wordmark{ position:relative; display:inline-flex; align-items:center; gap:-100px; }
.mark-icon{ height:232px; width:auto; opacity:0; transform:translateX(-16px); animation:name-slide .8s ease-out forwards; animation-delay:0s; }
.mark-name{ height:200px; width:auto; opacity:0; transform:translateX(-16px); animation:name-slide .8s ease-out forwards; animation-delay:.25s; }

/* Dashboard 副标题（与 CloudDock 左边对齐） */
.kicker{
  position:absolute; left:102px; top:156px; white-space:nowrap;
  opacity:0; transform:translateX(-16px); animation:name-slide .8s ease-out forwards; animation-delay:.55s;
  font-size:48px; font-weight:700; letter-spacing:.2px;
}
.kicker .type{
  display:inline-block; font-weight:700; letter-spacing:.2px; overflow:hidden; border-right:0 solid transparent;
  width:0ch; animation: typing 1.1s steps(9,end) forwards; animation-delay:1.05s; font-size:28px;
}
.kicker .cursor{
  display:inline-block; width:10px; height:1.2em; margin-left:2px;
  background:linear-gradient(#fff 0 0) left/2px 100% no-repeat;
  animation: blink .9s steps(1,end) infinite; opacity:.9; transform:translateY(3px); animation-delay:1.05s;
}

/* 小屏微调 */
@media (max-width:520px){
  .mark-icon{ height:56px }
  .mark-name{ height:44px }
  .kicker{ left:calc(56px + 20px); top:calc(44px + 8px); }
  .kicker .type{ font-size:22px; }
}

/* ---------- 顶部导航 ---------- */
.top-nav{
  display:flex; justify-content:space-between; align-items:center;
  background:#000; color:#fff; padding:5px 10px; position:relative; z-index:auto;
}
.logo-container{
  display:inline-flex; align-items:center; gap:0;
  width:200px; height:40px; overflow:hidden; position:relative;
}
.logo-container img{ height:40px; width:auto; display:block; vertical-align:middle; }
.logo-container img:first-child{ transform:scale(1.2); transform-origin:left center; }
.logo-container img:last-child { transform:scale(1.2); transform-origin:left center; }
#logo-placeholder{ height:40px; vertical-align:middle; }

nav a{ margin:0 15px; text-decoration:none; color:#fff; font-weight:bold; }
.user-info{ display:flex; align-items:center; gap:10px; }
.balance{ color:#4CAF50; }

.dropdown{ position:relative; z-index:auto; }
.dropdown-btn{ background:none; border:0; color:#fff; font-size:14px; cursor:pointer; }
.dropdown-content{
  display:none; position:absolute; right:0; top:25px; background:#fff; color:#000;
  box-shadow:0 2px 5px rgba(0,0,0,.25); border-radius:8px; overflow:hidden; padding:6px 0; min-width:180px; z-index:10;
}
.dropdown:hover .dropdown-content{ display:block; }
.dropdown-content a{
  display:flex; align-items:center; gap:10px; padding:10px 16px; text-decoration:none; color:#000; font-size:14px;
}
.dropdown-content a:hover{ background:#f0f0f0; color:#000; }
.dropdown-content i{ font-size:16px; color:#555; }
@media (max-width:768px){ .dropdown-content{ right:-10px; min-width:120px; } }

/* ---------- 顶部刷新提示 ---------- */
.top-refresh-bar{ display:flex; align-items:center; gap:12px; padding:20px 40px 10px; font-family:Arial,sans-serif; }
.refresh-ring{ width:30px; height:30px; transform:rotate(-90deg); }
.refresh-ring .bg{ fill:none; stroke:#eee; stroke-width:8; }
.refresh-ring .fg{ fill:none; stroke:#4CAF50; stroke-width:8; stroke-dasharray:283; stroke-dashoffset:0; transition: stroke-dashoffset 1s linear; }
.refresh-text{ font-size:12px; fill:#333; transform:rotate(90deg); font-weight:bold; }
.refresh-label{ font-size:14px; color:#444; }

/* ---------- 主区容器（已按你要求放宽） ---------- */
#dashboard{ margin-top:10px; max-width:930px; margin-left:auto; margin-right:auto; }

/* ---------- 机器卡片 ---------- */
.machine-card{
  background:#fff; border:1px solid #ddd; border-radius:12px;
  padding:16px 23px; margin-bottom:18px; text-align:left; font-size:14px;
}
.card-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.card-row h2{ flex:23; font-size:16px; margin:0; }
.card-row .price-label{ flex:1.5; margin:0; color:#555; }
.card-row .price-text{ color:#4CAF50; font-weight:bold; }
.card-row .hour-input{ width:64px; flex:1.5; text-align:center; padding:5px 8px; margin:0; }
.card-row .action{ flex:1; display:flex; justify-content:flex-end; }
.card-row .status-btn{
  flex:0 0 auto; padding:6px 14px; font-weight:bold; border:0; border-radius:8px; cursor:pointer; text-decoration:none;
}
.machine-card .hour-input:disabled{ display:none; }

.congestion-indicator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  position:relative; /* 给 tooltip 当定位参考 */
}


/* 图标放大 20% 左右：18 -> 22 */
.congestion-indicator .cong-icon{
  width:22px;
  height:22px;
  display:block;
  transition: transform .12s ease;
}


/* hover 轻微反馈 */
.congestion-indicator:hover .cong-icon{
  transform:translateY(-1px) scale(1.05);
}


/* ===== 小提示 tooltip（悬浮气泡） ===== */
.congestion-indicator[data-tip]::after{
  content: attr(data-tip);
  position:absolute;
  bottom:125%;                 /* 在图标上方一点 */
  left:50%;
  transform:translateX(-50%) translateY(2px);
  background:rgba(17,24,39,.95);
  color:#fff;
  padding:3px 8px;
  border-radius:6px;
  font-size:11px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  z-index:20;
}


/* 小三角 */
.congestion-indicator[data-tip]::before{
  content:"";
  position:absolute;
  bottom:120%;
  left:50%;
  transform:translateX(-50%);
  border-width:5px;
  border-style:solid;
  border-color:rgba(17,24,39,.95) transparent transparent transparent;
  opacity:0;
  transition:opacity .12s ease;
  z-index:20;
}


/* hover 时显示 tooltip */
.congestion-indicator[data-tip]:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(-1px);
}
.congestion-indicator[data-tip]:hover::before{
  opacity:1;
}

.congestion-indicator {
  display: inline-flex;
}


/* 按钮色系 */
.status-btn.gray { background:#ccc; color:#000; }
.status-btn.green{ background:#4CAF50; color:#fff; }
.status-btn.blue { background:#2196F3; color:#fff; }
.status-btn.red  { background:#f44336; color:#fff; }
.status-btn.yellow{ background:#ffc107; color:#000; }
.status-btn.purple{ background:#9b59b6; color:#fff; }

/* 分割线（放宽对齐） */
.card-divider{ height:5px; background:#ddd; border-radius:3px; margin:25px auto; width:100%; max-width:900px; }

/* 展开/折叠 */
.expand-handle{ margin-top:8px; text-align:center; font-size:16px; color:#888; cursor:pointer; font-family:monospace; }
.spec-details{ display:none; margin-top:6px; text-align:center; font-size:13px; color:#444; line-height:1.5; }

/* 页脚 */
.update-note{ font-size:12px; color:gray; margin-top:30px; }
footer{ margin-top:50px; padding:15px; background:#f4f4f4; color:gray; font-size:14px; }

/* 队列徽标 */
.queue-badge.yellow{ color:#ffc107; background:transparent; }

/* 垂直堆叠按钮+小字 */
.btn-stack{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.extra-note{ display:block; width:100%; margin-top:2px; text-align:center; font-size:12px; line-height:1.2; background:transparent; }
.link-btn.blue{ background:transparent; border:0; font-size:12px; cursor:pointer; padding:0; color:#2196F3; }
.link-btn.blue:hover{ text-decoration:underline; }

/* ---------- 背景图变体卡（磨砂） ---------- */
.machine-card.bg-card{
  position:relative; overflow:hidden; background:none; border:1px solid #ddd; border-radius:12px;
  padding:14px 20px; margin-bottom:18px; text-align:left; font-size:14px; min-height:60px;
}
.machine-card.bg-card::before{
  content:""; position:absolute; inset:0;
  background-image: var(--bg-img, url('/static/images/sd-background.jpg'));
  background-size:cover; background-position: var(--bg-pos, center 60%); transform: scale(var(--bg-zoom,1.04));
  border-radius:inherit; z-index:0; pointer-events:none;
}
.machine-card.bg-card::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
  border-radius:inherit; z-index:0; pointer-events:none;
}
.machine-card.bg-card .bg-content{ position:relative; z-index:1; padding:0; }
.machine-card.bg-card .card-row{ background:transparent; padding:0; }
.machine-card.bg-card h2{ margin:0; font-size:16px; color:#1a1a1a; text-shadow:0 1px 0 rgba(255,255,255,.5); }
.machine-card.bg-card .action{ flex:1; display:flex; justify-content:flex-end; }
/* 隐藏价格/小时输入 */
.machine-card.bg-card .price,
.machine-card.bg-card .price-label,
.machine-card.bg-card .hour-input{ display:none; }
/* 奶油色按钮外观 */
.machine-card.bg-card .action .status-btn.rice{
  background:#F6F2E9; color:#3B2F2A; border:1px solid #E7DCC7; text-decoration:none;
}
.machine-card.bg-card .action .status-btn.blue:hover{ background:#EADFC8; }
.machine-card.bg-card .action .status-btn.blue:active{ background:#E1D3B6; }
.machine-card.bg-card .action .status-btn.blue:disabled{ opacity:.6; cursor:not-allowed; }
/* 抽屉 */
.machine-card.bg-card .expand-handle{ position:relative; z-index:2; }
.machine-card.bg-card .spec-details{
  display:none; position:relative; z-index:2; border-radius:10px; padding:10px 12px;
  background:rgba(255,255,255,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ---------- Extend（加时）行（合并基类+兼容选择器） ---------- */
.extend-inline{
  display:flex; align-items:center; justify-content:center; gap:6px; margin:6px 0 8px; padding:0 2px;
  position:relative; z-index:2; flex-wrap:nowrap; max-width:260px; margin-left:auto; margin-right:auto;
}
.extend-inline .ext-hours{
  width:96px; padding:6px 10px; text-align:center;
  border:1px solid #cfd6e0; border-radius:10px; font-size:12px;
}
.extend-inline .ext-hours::placeholder{ color:#9aa4b2; }
.extend-inline .tri-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:10px; border:1px solid #cfead8; background:#e9f9ef; cursor:pointer; padding:0; line-height:1;
}
.extend-inline .tri-btn span{ font-size:16px; color:#23b26b; }
.extend-inline .tri-btn:hover{ filter:brightness(.98); }
.extend-inline .tri-btn:disabled{ opacity:.6; cursor:not-allowed; }
/* 兼容旧选择器（不会与上面冲突） */
.action-row .extend-inline{ margin-top:4px; flex-wrap:wrap; }
@media (max-width:420px){
  .extend-inline{ max-width:220px; }
  .extend-inline .ext-hours{ width:84px; }
}

/* ---------- 通知：Toast + 毛玻璃通知（合并最终版） ---------- */
.cd-toast{
  position:fixed; top:64px; right:24px; z-index:99999;
  background:#10b981; color:#fff; padding:10px 14px; border-radius:10px; font-size:13px;
  box-shadow:0 6px 18px rgba(16,185,129,.25); opacity:0; transform:translateY(-8px);
  animation: cd-toast-in .16s ease-out forwards, cd-toast-out var(--toast-out) ease-in forwards var(--toast-life);
}
@keyframes cd-toast-in{ to{ opacity:1; transform:none } }
@keyframes cd-toast-out{ to{ opacity:0; transform:translateY(-6px) } }

/* 右上通知容器（贴 header） */
.cd-notify-wrap{
  position:fixed; top:calc(var(--hdr-h) + 12px); right:16px; width:min(420px,92vw);
  display:flex; flex-direction:column; gap:10px; z-index:9999; pointer-events:none;
}
@media (max-width:640px){
  .cd-notify-wrap{ right:auto; left:50%; transform:translateX(-50%); align-items:center; width:min(520px,calc(100% - 24px)); }
}

/* 毛玻璃通知卡 */
.cd-note{
  position:relative; display:flex; align-items:center; gap:10px; pointer-events:auto;
  padding:10px 12px; border-radius:14px;
  background:rgba(255,255,255,.65); backdrop-filter:blur(12px) saturate(120%); -webkit-backdrop-filter:blur(12px) saturate(120%);
  border:1px solid rgba(255,255,255,.45); box-shadow:0 10px 25px rgba(0,0,0,.12);
  opacity:0; transform:translateY(-6px); max-height:500px; margin:0;
  transition: opacity .22s ease, transform .22s ease, max-height .22s ease, padding .22s ease;
}
@supports not (backdrop-filter: blur(1px)){ .cd-note{ background:rgba(255,255,255,.9); } }
.cd-note.enter{ opacity:1; transform:none; }
.cd-note.closing{ opacity:0; transform:translateY(-6px); max-height:0; padding-top:0; padding-bottom:0; overflow:hidden; }

/* 进度条/状态色 */
.cd-note .bar{ position:absolute; left:0; right:0; top:0; height:3px; border-top-left-radius:14px; border-top-right-radius:14px; background:#22c55e; animation: cd-bar 10s linear forwards; transition:height .2s; }
.cd-note.closing .bar{ height:0; }
@keyframes cd-bar{ from{ width:100% } to{ width:0% } }
.cd-note.success .bar{ background:linear-gradient(90deg,#22c55e,#16a34a); }
.cd-note.warn    .bar{ background:linear-gradient(90deg,#f59e0b,#f97316); }
.cd-note.error   .bar{ background:linear-gradient(90deg,#ef4444,#dc2626); }

.cd-note .body{ flex:1; min-width:0; text-align:left; }
.cd-note .title{ font-weight:600; font-size:14px; line-height:1.2; color:#0f172a; }
.cd-note .msg{ margin-top:2px; font-size:12px; color:#334155; white-space:pre-line; }
.cd-note .icon{ order:3; font-size:16px; line-height:1; margin-left:8px; opacity:.9; }
.cd-note .close{ order:4; margin-left:4px; border:0; background:transparent; font-size:16px; cursor:pointer; color:#475569; opacity:.7; padding:4px; }

/* 成功脉冲（合并“长驻”版本） */
.cd-success-ping{
  position:absolute; right:-6px; top:-6px; width:18px; height:18px; border-radius:50%; background:#22c55e;
  display:grid; place-items:center; color:#fff; font-size:12px; line-height:1;
  box-shadow:0 0 0 0 rgba(34,197,94,.5); animation: cd-ping-hold var(--inline-life) ease-out forwards;
}
@keyframes cd-ping-hold{
  0%  { transform:scale(.88); box-shadow:0 0 0 0 rgba(34,197,94,.55); opacity:0; }
  10% { transform:scale(1);   box-shadow:0 0 0 8px rgba(34,197,94,0);   opacity:1; }
  90% { transform:scale(1);   box-shadow:0 0 0 8px rgba(34,197,94,0);   opacity:1; }
  100%{ transform:scale(1);   box-shadow:0 0 0 8px rgba(34,197,94,0);   opacity:0; }
}

/* ---------- Container Pill（容器选择） ---------- */
.cd-ctr{
  --pill-h: 24px;
  display:inline-flex; align-items:center; gap:6px;
  height:var(--pill-h); padding:0 12px; min-width:156px;   /* 兜底更宽（你之前 +30%） */
  border:1px solid #D6D9E6; border-radius:999px; background:#F3F5FD; color:#1A1D2C;
  font-size:12px; line-height:1; user-select:none; white-space:nowrap;
  transition:background .16s, border-color .16s, color .16s, transform .12s, box-shadow .12s;
}
.cd-ctr .label{
  font-weight:600; flex:1 1 auto; min-width:0;           /* ✅ 关键：允许收缩 */
  overflow:hidden; text-overflow:ellipsis;               /* ✅ 仅空间不够时省略 */
}
.cd-ctr .ver{ opacity:.65; margin-left:4px; font-weight:500; flex:0 0 auto; }
.cd-ctr .caret{ display:none !important; }
.cd-ctr:not(.cd-locked):hover{ transform:translateY(-1px); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.cd-ctr.menu-open{ border-color:#B9C4FF; box-shadow:0 0 0 3px rgba(68,102,242,.08) inset; }
.cd-ctr.green{
  background:#E9FBEE !important; border-color:#C5F0D1 !important; color:#0F8A2E !important;
  box-shadow:none; transform:none; position:relative;
}
.cd-ctr.cd-locked{ pointer-events:none; cursor:default; }
.cd-ctr.green::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 16%, rgba(255,255,255,0) 32%);
  background-size:200% 100%; background-repeat:no-repeat; animation:cd-sweep-ltr 7s infinite; opacity:.9;
}
@keyframes cd-sweep-ltr{ 0%{background-position:-200% 0} 45%{background-position:200% 0} 100%{background-position:200% 0} }

/* 容器下拉（毛玻璃） */
.cd-pop{
  position:fixed; z-index:9999; padding:8px; border-radius:12px;
  background:rgba(255,255,255,.25); backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(255,255,255,.4); box-shadow:0 12px 36px rgba(0,0,0,.18);
  transform:translateY(-6px) scale(.98); opacity:0; transition:opacity .14s ease, transform .14s ease; min-width:286px;
}
.cd-pop.open{ opacity:1; transform:none; }
.cd-pop .item{
  display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:10px; font-size:13px; cursor:pointer;
  transition:background .12s ease, opacity .12s ease;
}
.cd-pop .item:hover{ background:rgba(255,255,255,.5); }
.cd-pop .item.disabled{ opacity:.45; cursor:not-allowed; }
.cd-pop.readonly .item{ cursor:default; }
.cd-pop .left{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.cd-pop .title-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cd-pop .name{ font-weight:600; }
.cd-pop .version{ font-size:11px; opacity:.7; }

/* ---------- Restart 弹窗 ---------- */
.cd-backdrop{ position:fixed; inset:0; z-index:10000; background:rgba(10,12,14,.35); backdrop-filter:blur(3px); opacity:0; transition:opacity .15s ease; }
.cd-backdrop.open{ opacity:1; }
.cd-modal{
  position:fixed; z-index:10001; width:min(520px,calc(100vw - 32px)); max-height:min(80vh,620px);
  top:50%; left:50%; transform:translate(-50%,-46%) scale(.96); opacity:.01;
  background:rgba(255,255,255,.6); backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(255,255,255,.45); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:flex; flex-direction:column; padding:16px; transition:transform .16s cubic-bezier(.2,.9,.2,1), opacity .16s ease;
}
.cd-modal.open{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.cd-modal .hd{ font-weight:700; font-size:16px; margin-bottom:10px; }
.cd-modal .body{ overflow:auto; padding:6px 2px; }
.cd-modal .container-list{ display:grid; grid-template-columns:1fr; gap:8px; }
.cd-modal .opt{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.05); }
.cd-modal .opt.disabled{ opacity:.45; filter:saturate(.6); }
.cd-modal .container-list .opt .desc{ margin:2px 0 0 26px; align-self:stretch; }
.cd-modal .ft{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.cd-btn{ padding:8px 14px; border-radius:10px; border:1px solid #D1D5DB; background:#fff; cursor:pointer; }
.cd-btn.primary{ background:#2563eb; color:#fff; border-color:#2563eb; }
.cd-btn:disabled{ opacity:.6; cursor:not-allowed; }
.cd-modal .danger{ background:#fff5f5; border:1px solid #ffd9d9; color:#7a1e1e; border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.cd-modal .danger strong{ font-weight:700; display:block; margin-bottom:4px; }
.cd-modal .confirm-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; margin-top:10px; }
.cd-modal .confirm-row input{ min-width:0; padding:8px 10px; border:1px solid #E4E7F1; border-radius:8px; font-size:13px; }
.cd-modal .confirm-row .confirm-hint{ font-size:12px; color:#666; }
body.cd-modal-open{ overflow:hidden; }

/* --- 修复通知栏右侧 icon（彩色圆圈 + ✓ / ▲ / ×） --- */
.cd-note .icon{
  order: 3;                 /* 仍然在右侧（close 前一位） */
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;   /* 彩色圆环 */
  margin-left: 8px;
  opacity: .95;
  font-weight: 700;
  line-height: 1;
}

/* 只有当 .icon 为空时，由 CSS 自动塞入符号，避免和你已有内容冲突 */
.cd-note .icon:empty::before{
  content: "";
  font-size: 14px;
  transform: translateY(-1px);
}

/* 类型配色只作用于 icon，不影响标题/正文文字色 */
.cd-note.success .icon{ color: #34c759; }    /* 绿 ✓ */
.cd-note.warn    .icon{ color: #ff9800; }    /* 橙 ▲ */
.cd-note.error   .icon{ color: #f44336; }    /* 红 ×  */

/* 对应符号（空图标时自动注入） */
.cd-note.success .icon:empty::before{ content: "✓"; }
.cd-note.warn    .icon:empty::before{ content: "▲"; font-size: 12px; transform: translateY(-.5px); }
.cd-note.error   .icon:empty::before{ content: "×"; }

/* ===== 通知铃铛 ===== */
.user-info .notify { position: relative; display:inline-block; }
.notify-bell{
  width:30px; height:30px; border:0; background:transparent; color:#fff;
  display:inline-grid; place-items:center; border-radius:10px; cursor:pointer;
  transition: background .12s ease, transform .12s ease;
}
.notify-bell:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px); }
.notify-bell i{ font-size:18px; line-height:1; }


.notify-bell .dot{
  position:absolute; top:2px; right:2px; width:8px; height:8px; border-radius:50%;
  background:#ff4d4f; box-shadow:0 0 0 2px rgba(0,0,0,.35);
}


/* ===== 毛玻璃托盘（流畅伸缩） ===== */
.cd-tray{
  position:absolute; right:0; top:calc(100% + 8px);
  width:min(420px, 94vw); padding:8px; border-radius:12px;
  background:rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 12px 36px rgba(0,0,0,.18);
  transform-origin: top right;
  opacity:0; transform: translateY(-6px) scale(.98);
  max-height:0; overflow:hidden;
  transition: opacity .16s ease, transform .16s ease, max-height .22s ease;
  z-index:10000;
}
.cd-tray.open{
  opacity:1; transform:none; max-height:70vh; overflow:auto;
}


/* 托盘里的条目（继承 unified-notifier 的气质） */
.notice-item{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; margin:6px 0; border-radius:10px;
  background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.05);
  text-align:left;
}
.notice-item .title{ font-weight:700; font-size:14px; color:#0f172a; }
.notice-item .meta { font-size:11px; color:#6b7280; }
.notice-item .body{ font-size:12px; color:#334155; white-space:pre-line; }
.notice-item a{ color:#2563eb; text-decoration:underline; }


.notice-empty{ font-size:12px; color:#666; padding:12px; text-align:center; }


/* 重要标签（小药丸） */
.notice-chip{
  display:inline-block; padding:1px 6px; margin-left:6px;
  border-radius:999px; font-size:11px; line-height:16px;
  background:#FFEFD2; color:#8a4b00; border:1px solid #ffdb97;
}

/* 让 header 不裁切托盘（你如果不知道哪一层裁切，就先把这几个都加上） */
#user, .topbar, .nav, .nav-right, header {
  overflow: visible !important;
}


/* =========================
   CloudDock PASS/VIP – Final Clean
   ========================= */


.cd-pass-badge{
  --pct: 0%;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;


  margin-left: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;


  font-weight: 900;
  letter-spacing: .6px;
  font-size: 12.5px;
  line-height: 1;


  transform: translateY(-1px);
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
  z-index: 1; /* pop 的定位参考，且不被别的层压 */
}


.cd-pass-badge i{ font-size: 14px; line-height: 1; }
.cd-pass-badge:hover{ transform: translateY(-2px); }


/* OFF: 没买 -> 灰色 PASS */
.cd-pass-badge.off{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.82);
}
.cd-pass-badge.off:hover{
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}


/* ON: 买了 -> 不破皮版（渐变在 ::after） */
.cd-pass-badge.on{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  color: #0b0f14;
  background: transparent;
  filter: none; /* 别用 saturate，容易炸边缘 AA */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 12px 40px rgba(124,124,255,.28),
    0 10px 24px rgba(49,208,255,.18);
}
.cd-pass-badge.on::after{
  content:"";
  position:absolute;
  inset:1px;                 /* 留 1px 给边框，稳 */
  border-radius: 999px;
  background: linear-gradient(135deg,#ff63d8 0%,#7c7cff 45%,#31d0ff 100%);
  z-index:-1;
  transform: translateZ(0);
}


/* ===== badge 底部细进度条（保留） ===== */
.cd-pass-badge::before{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.30);
}

/* ===== badge 底部细进度条（修复满条穿模） ===== */
.cd-pass-badge .prog{
  position:absolute;
  left:10px;
  right:10px;              /* 用 right 锁死内槽宽度 */
  bottom:3px;
  height:3px;
  width:auto;              /* 不再用 width:100% 这类会穿模的写法 */
  border-radius:999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset;


  transform-origin:left center;
  transform: scaleX(var(--p, 0));   /* 0~1 的比例 */
}


/* ===== hover pop（浅毛玻璃 + 深字 + 顶部进度条） ===== */
.cd-pass-pop{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;


  width: 290px;
  padding: 12px 12px 10px;   /* 顶部给进度条呼吸 */
  border-radius: 12px;


  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 18px 55px rgba(0,0,0,.32);


  /* 顶部条要干净圆角 */
  overflow: hidden;


  opacity:0;
  transform: translateY(-6px) scale(.98);
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 10000;


  text-align:left;
  color: rgba(15,18,22,.92);
}


@supports not (backdrop-filter: blur(1px)){
  .cd-pass-pop{ background: rgba(255,255,255,.95); }
}


/* 展开逻辑 */
.cd-pass-badge:hover .cd-pass-pop,
.cd-pass-badge:focus-visible .cd-pass-pop{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.cd-pass-badge.open .cd-pass-pop{
  opacity:1;
  transform:none;
  pointer-events:auto;
}


.cd-pass-pop .line{ display:block; font-size:12px; font-weight:900; }
.cd-pass-pop .meta{ opacity:.72; margin-top:6px; font-weight:800; }


/* pop 顶部底槽 */
.cd-pass-pop::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background: rgba(15,18,22,.10);
}
/* pop 顶部实际进度（吃 --pct） */
.cd-pass-pop::after{
  content:"";
  position:absolute;
  left:0; top:0;
  height:3px;
  width: var(--pct);
  background: linear-gradient(90deg, rgba(15,18,22,.92), rgba(15,18,22,.45));
}
/* VIP pop 顶条用 VIP 渐变 */
.cd-pass-badge.on .cd-pass-pop::after{
  background: linear-gradient(90deg,#ff63d8 0%,#7c7cff 50%,#31d0ff 100%);
}


/* 备胎：隐藏 pop 里面旧 bar（你现在已经不需要了） */
.cd-pass-pop .bar{ display:none !important; }

/* --- Beta Pill (hard override) --- */
.cd-pop .cd-pill,
.cd-modal .cd-pill,
.cd-ctr .cd-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  white-space: nowrap;
}


.cd-pop .cd-pill.beta,
.cd-modal .cd-pill.beta {
  background: #E7F1FF;
  color: #1E5B99;
  border: 1px solid rgba(30, 91, 153, 0.18);
}

/* =========================================================
   My Instance Metrics Card (clean + glam, safely scoped)
   ========================================================= */


/* ---------- Card: show/hide animation ---------- */
.my-metrics-card{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: transform .22s ease, opacity .22s ease, max-height .25s ease;


  /* premium background */
  position: relative;
  background: linear-gradient(135deg,
    rgba(99,102,241,.10) 0%,
    rgba(49,208,255,.10) 45%,
    rgba(255,99,216,.08) 100%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 10px 30px rgba(0,0,0,.06),
    0 1px 0 rgba(255,255,255,.65) inset;
}


.my-metrics-card.show{
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
}


/* highlight film */
.my-metrics-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(120% 90% at 18% 0%,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,0) 55%),
    radial-gradient(90% 80% at 95% 20%,
      rgba(255,255,255,.25) 0%,
      rgba(255,255,255,0) 60%);
  opacity:.75;
}


/* subtle grain */
.my-metrics-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.02) 0 2px,
      rgba(0,0,0,.02) 2px 4px);
  mix-blend-mode: overlay;
  opacity:.18;
}




/* ---------- Header row ---------- */
.my-metrics-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding: 14px 16px 10px 16px;
}


.my-metrics-head .title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}


.my-metrics-head .tag{
  font-size:12px;
  font-weight:700;
  padding: 4px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.06);
}


.my-metrics-head .name{
  font-size:16px;
  font-weight:800;
}


.my-metrics-head .sub{
  margin-top:4px;
  font-size:12px;
  color:#666;
}


.my-metrics-head .right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  min-width: 200px;
}


.my-metrics-head .endtime{
  font-size:12px;
  color:#444;
  white-space:nowrap;
}




/* ---------- Button (mini) ---------- */
.status-btn.mini{
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 10px;
}


/* Restart Instance (final single definition) */
#my-metrics-restart.status-btn.mini{
  position: relative;
  padding: 9px 12px;
  border-radius: 12px;
  color: rgba(10,14,20,.92);
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(135deg,
    rgba(255,255,255,.78) 0%,
    rgba(255,255,255,.55) 40%,
    rgba(255,255,255,.40) 100%);
  box-shadow:
    0 12px 28px rgba(37,99,235,.18),
    0 1px 0 rgba(255,255,255,.75) inset,
    0 0 0 1px rgba(0,0,0,.05);
  backdrop-filter: blur(10px) saturate(1.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  overflow: hidden;
}


#my-metrics-restart.status-btn.mini::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.18) 55%,
    rgba(255,255,255,0) 100%);
  opacity:.9;
}


#my-metrics-restart.status-btn.mini::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 18%,
    rgba(255,255,255,0) 36%);
  background-size: 220% 100%;
  opacity:.55;
  animation: cd-restart-sheen 5.8s ease-in-out infinite;
}


@keyframes cd-restart-sheen{
  0%   { background-position: -220% 0; }
  45%  { background-position:  220% 0; }
  100% { background-position:  220% 0; }
}


#my-metrics-restart.status-btn.mini:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}


#my-metrics-restart.status-btn.mini:active{
  transform: translateY(0px);
  filter: brightness(.99);
}


#my-metrics-restart.status-btn.mini:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.7);
}




/* ---------- Grid ---------- */
.my-metrics-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  padding: 0 16px 14px 16px;
}


@media (max-width: 680px){
  .my-metrics-grid{ grid-template-columns: 1fr; }
  .my-metrics-head .right{ min-width: 0; }
}




/* ---------- Item block ---------- */
.m-item{
  padding: 10px 12px;
  border-radius: 14px;


  /* glass */
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  box-shadow:
    0 10px 24px rgba(0,0,0,.06),
    0 1px 0 rgba(255,255,255,.70) inset;
}


.m-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}


.m-label{ font-size:12px; font-weight:800; }
.m-value{ font-size:12px; color:#444; white-space:nowrap; }




/* ---------- Bar ---------- */
.m-bar{
  margin-top:8px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.09);
  overflow:hidden;
}


.m-bar > span{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background-size: 220% 100%;
  transition: width .42s cubic-bezier(.2,.9,.2,1);
  animation: cd-bar-sheen 9s ease-in-out infinite;
  will-change: background-position, width;
}


/* CPU/GPU optional classes (JS can add these) */
.m-item.is-cpu .m-bar > span{
  background-image: linear-gradient(90deg,#22c55e 0%, #31d0ff 55%, #7c7cff 100%);
}
.m-item.is-gpu .m-bar > span{
  background-image: linear-gradient(90deg,#ff63d8 0%, #7c7cff 55%, #31d0ff 100%);
}


@keyframes cd-bar-sheen{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}




/* ---------- Ring layout (optional item variant) ---------- */
.m-item.ring{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}


.m-item.ring .m-info{ flex:1 1 auto; min-width:0; }
.m-item.ring .m-value{ overflow:hidden; text-overflow:ellipsis; }




/* ---------- Ring UI ---------- */
.m-ring{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}


.ring-wrap{
  position:relative;
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  isolation:isolate;
}


/* slow glow spin */
.ring-wrap::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  background: conic-gradient(
    from 180deg,
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,.55) 30deg,
    rgba(255,255,255,0) 60deg,
    rgba(255,255,255,0) 360deg
  );
  filter: blur(1px);
  opacity:.55;
  animation: cd-ring-spin 12s linear infinite;
  z-index:0;
}


@keyframes cd-ring-spin{
  to{ transform: rotate(360deg); }
}


/* base plate */
.ring-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(0,0,0,.06);
  z-index:0;
}


/* mild tints */
.ring-wrap.mem::after { background: rgba(49,208,255,.10); }
.ring-wrap.disk::after{ background: rgba(245,158,11,.10); }
.ring-wrap.vram::after{ background: rgba(255,99,216,.10); }


svg.ring{
  width:44px;
  height:44px;
  transform: rotate(-90deg);
  z-index:1;
}


svg.ring circle{
  fill:none;
  stroke-width:10;
}


svg.ring circle.bg{
  stroke: rgba(0,0,0,.10);
}


svg.ring circle.fg{
  stroke-linecap: round;
  stroke-dasharray: 263.89;   /* 2*pi*42 */
  stroke-dashoffset: 263.89;
  transition: stroke-dashoffset .55s cubic-bezier(.2,.9,.2,1);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.12));
}




/* ---------- Reduced motion (safety) ---------- */
@media (prefers-reduced-motion: reduce){
  .my-metrics-card,
  .m-bar > span,
  .ring-wrap::before,
  #my-metrics-restart.status-btn.mini::after{
    transition: none !important;
    animation: none !important;
  }
}



/* ===== My Metrics Card: restart button affordance ===== */
#my-metrics-restart {
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}


#my-metrics-restart:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}


#my-metrics-restart:active {
  transform: translateY(0px) scale(0.99);
}


/* processing 时你会隐藏它；但兜底防误触 */
#my-metrics-restart[disabled],
#my-metrics-restart:disabled {
  cursor: not-allowed;
  opacity: .55;
  filter: none;
  transform: none;
}


/* ===== My Metrics Card enter/exit animation ===== */
#my-metrics-card {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height .28s ease, opacity .22s ease, transform .22s ease;
  will-change: max-height, opacity, transform;
}


#my-metrics-card.open {
  max-height: 820px;           /* 够大即可（你这卡高度不小） */
  opacity: 1;
  transform: translateY(0);
}


/* 可选：减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  #my-metrics-card { transition: none; transform: none; }
}