/* =========================
   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; }

/* 按钮色系 */
.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: "×"; }