/* =========================
   CloudDock Dashboard – Clean Merge (lossless)
   ========================= */


/* ---------- Theme / Variables ---------- */
:root{
  color-scheme: light;


  --theme-dur: 260ms;
  --theme-ease: cubic-bezier(.2,.9,.2,1);


  /* page */
  --bg-page: #f4f4f4;
  --bg-page-2: #eeeeee;


  /* text */
  --text-main: #111827;
  --text-soft: #475569;
  --text-muted: #6b7280;
  --text-inverse: #ffffff;


  /* panels */
  --panel-bg: #ffffff;
  --panel-bg-soft: #f8fafc;
  --panel-border: #dddddd;
  --panel-shadow: 0 2px 10px rgba(0,0,0,.06);


  /* nav */
  --nav-bg: #000000;
  --nav-text: #ffffff;
  --nav-hover: rgba(255,255,255,.12);


  /* popup / glass */
  --popup-bg: rgba(255,255,255,.82);
  --popup-bg-strong: rgba(255,255,255,.92);
  --popup-border: rgba(255,255,255,.55);
  --popup-text: #0f172a;
  --popup-subtext: #334155;


  /* detail */
  --spec-text: #444444;
  --divider: #dddddd;


  /* form */
  --input-bg: #ffffff;
  --input-text: #111827;
  --input-border: #cccccc;
  --input-placeholder: #94a3b8;


  /* special */
  --price-green: #4CAF50;
  --refresh-track: #eeeeee;
  --refresh-text: #333333;
  --refresh-label: #444444;


  /* bg card */
  --bgcard-overlay: rgba(255,255,255,.32);
  --bgcard-title: #1a1a1a;
  --bgcard-spec-bg: rgba(255,255,255,.55);


  /* metrics */
  --metrics-text: #111827;
  --metrics-sub: #666666;
  --metrics-soft: #444444;
  --metrics-chip: rgba(0,0,0,.06);
  --metrics-item-bg: rgba(255,255,255,.55);
  --metrics-item-border: rgba(255,255,255,.45);
  --metrics-bar-track: rgba(0,0,0,.09);
  --metrics-ring-track: rgba(0,0,0,.10);


  --hdr-h: 64px;
  --toast-life: 5s;
  --toast-out: .25s;
  --inline-life: 5s;


  /* float glass: tray / pop 专用，别和 modal 共用 */
  --float-bg: rgba(255,255,255,.25);
  --float-bg-strong: rgba(255,255,255,.55);
  --float-border: rgba(255,255,255,.40);
  --float-item-border: rgba(0,0,0,.05);
  --float-hover: rgba(255,255,255,.50);


  /* modal secondary button */
  --modal-btn-bg: #ffffff;
  --modal-btn-text: #111827;
  --modal-btn-border: #D1D5DB;
  --modal-btn-hover: #f8fafc;
  /* footer */
  --footer-bg: #f4f4f4;
  --footer-text: gray;
}


:root[data-theme="dark"]{
  color-scheme: dark;


  --bg-page: #0b0f14;
  --bg-page-2: #0f141b;


  --text-main: #f3f4f6;
  --text-soft: #cbd5e1;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;


  --panel-bg: #111827;
  --panel-bg-soft: #0f172a;
  --panel-border: #273244;
  --panel-shadow: 0 10px 30px rgba(0,0,0,.32);


  --nav-bg: #06090d;
  --nav-text: #f8fafc;
  --nav-hover: rgba(255,255,255,.08);


  --popup-bg: rgba(15,23,42,.82);
  --popup-bg-strong: rgba(15,23,42,.92);
  --popup-border: rgba(255,255,255,.08);
  --popup-text: #f8fafc;
  --popup-subtext: #cbd5e1;


  --spec-text: #cbd5e1;
  --divider: #273244;


  --input-bg: #0f172a;
  --input-text: #f3f4f6;
  --input-border: #334155;
  --input-placeholder: #64748b;


  --price-green: #5fd47f;
  --refresh-track: #263041;
  --refresh-text: #e5e7eb;
  --refresh-label: #cbd5e1;


  --bgcard-overlay: rgba(7,10,16,.45);
  --bgcard-title: #f8fafc;
  --bgcard-spec-bg: rgba(15,23,42,.55);


  --metrics-text: #f8fafc;
  --metrics-sub: #cbd5e1;
  --metrics-soft: #cbd5e1;
  --metrics-chip: rgba(255,255,255,.08);
  --metrics-item-bg: rgba(15,23,42,.55);
  --metrics-item-border: rgba(255,255,255,.08);
  --metrics-bar-track: rgba(255,255,255,.10);
  --metrics-ring-track: rgba(255,255,255,.12);
  
  --float-bg: rgba(15,23,42,.28);
  --float-bg-strong: rgba(15,23,42,.46);
  --float-border: rgba(255,255,255,.10);
  --float-item-border: rgba(255,255,255,.08);
  --float-hover: rgba(255,255,255,.08);


  --modal-btn-bg: rgba(255,255,255,.06);
  --modal-btn-text: #f8fafc;
  --modal-btn-border: rgba(255,255,255,.14);
  --modal-btn-hover: rgba(255,255,255,.10);



  /* footer: black background + white text */
  --footer-bg: #000000;
  --footer-text: #ffffff;
}


/* ---------- Base ---------- */
body{
  margin:0;
  font-family: Arial, sans-serif;
  background: var(--bg-page);
  color: var(--text-main);
  text-align:center;
}


h1,h2,p{ margin:.5em 0; }


input,
button{
  border-radius:8px;
  padding:6px 10px;
  border:1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
}


input::placeholder{
  color: var(--input-placeholder);
}


.hidden,
[hidden]{
  display:none !important;
}


/* ---------- Entry Screen ---------- */
#entry-screen{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#000;
  color:#fff;
  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{
  width:auto;
  height:232px;
  opacity:0;
  transform:translateX(-16px);
  animation:name-slide .8s ease-out forwards;
  animation-delay:0s;
}


.mark-name{
  width:auto;
  height:200px;
  opacity:0;
  transform:translateX(-16px);
  animation:name-slide .8s ease-out forwards;
  animation-delay:.25s;
}


.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;
  width:0ch;
  overflow:hidden;
  border-right:0 solid transparent;
  font-size:28px;
  font-weight:700;
  letter-spacing:.2px;
  animation: typing 1.1s steps(9,end) forwards;
  animation-delay:1.05s;
}


.kicker .cursor{
  display:inline-block;
  width:10px;
  height:1.2em;
  margin-left:2px;
  opacity:.9;
  transform:translateY(3px);
  background:linear-gradient(#fff 0 0) left/2px 100% no-repeat;
  animation: blink .9s steps(1,end) infinite;
  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 Navigation ---------- */
.top-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:5px 10px;
  position:relative;
  z-index:auto;
  background: var(--nav-bg);
  color: var(--nav-text);
}


.logo-container{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:0;
  width:200px;
  height:40px;
  overflow:hidden;
}


.logo-container img{
  width:auto;
  height:40px;
  display:block;
  vertical-align:middle;
}


.logo-container img:first-child,
.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: var(--nav-text);
  font-weight:bold;
}


.user-info{
  display:flex;
  align-items:center;
  gap:10px;
}


.balance{
  color: var(--price-green);
}


.dropdown{
  position:relative;
  z-index:auto;
}


.dropdown-btn{
  background:none;
  border:0;
  color: var(--nav-text);
  font-size:14px;
  cursor:pointer;
}


.dropdown-content{
  display:none;
  position:absolute;
  right:0;
  top:25px;
  z-index:10;
  min-width:180px;
  padding:6px 0;
  overflow:hidden;
  border-radius:8px;
  background: var(--panel-bg);
  color: var(--text-main);
  border:1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}


.dropdown:hover .dropdown-content{
  display:block;
}


.dropdown-content a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  text-decoration:none;
  color: var(--text-main);
  font-size:14px;
}


.dropdown-content a:hover{
  background: var(--panel-bg-soft);
  color: var(--text-main);
}


.dropdown-content i{
  font-size:16px;
  color: var(--text-muted);
}


@media (max-width:768px){
  .dropdown-content{
    right:-10px;
    min-width:120px;
  }
}


/* ---------- Top Refresh Bar ---------- */
.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: var(--refresh-track);
  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;
  font-weight:bold;
  fill: var(--refresh-text);
  transform:rotate(90deg);
}


.refresh-label{
  font-size:14px;
  color: var(--refresh-label);
}


/* ---------- Main Dashboard ---------- */
#dashboard{
  max-width:930px;
  margin:10px auto 0;
}


/* ---------- Machine Card ---------- */
.machine-card{
  margin-bottom:18px;
  padding:16px 23px;
  border-radius:12px;
  text-align:left;
  font-size:14px;
  background: var(--panel-bg);
  color: var(--text-main);
  border:1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}


.card-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}


.card-row h2{
  flex:23;
  margin:0;
  font-size:16px;
}


.card-row .price-label{
  flex:1.5;
  margin:0;
  color: var(--text-muted);
}


.card-row .price-text{
  color: var(--price-green);
  font-weight:bold;
}


.card-row .hour-input{
  flex:1.5;
  width:64px;
  margin:0;
  padding:5px 8px;
  text-align:center;
}


.card-row .action{
  flex:1;
  display:flex;
  justify-content:flex-end;
}


.card-row .status-btn{
  flex:0 0 auto;
  padding:6px 14px;
  border:0;
  border-radius:8px;
  font-weight:bold;
  cursor:pointer;
  text-decoration:none;
}


.machine-card .hour-input:disabled{
  display:none;
}


/* ---------- Congestion Indicator ---------- */
.congestion-indicator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  cursor:pointer;
  user-select:none;
}


.congestion-indicator .cong-icon{
  width:22px;
  height:22px;
  display:block;
  transition: transform .12s ease;
}


.congestion-indicator:hover .cong-icon{
  transform:translateY(-1px) scale(1.05);
}


.congestion-indicator[data-tip]::after{
  content: attr(data-tip);
  position:absolute;
  left:50%;
  bottom:125%;
  z-index:20;
  padding:3px 8px;
  border-radius:6px;
  white-space:nowrap;
  font-size:11px;
  color:#fff;
  background:rgba(17,24,39,.95);
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(2px);
  transition:opacity .12s ease, transform .12s ease;
}


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


.congestion-indicator[data-tip]:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(-1px);
}


.congestion-indicator[data-tip]:hover::before{
  opacity:1;
}


/* ---------- Status Buttons ---------- */
.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; }


/* ---------- Divider / Details / Footer ---------- */
.card-divider{
  width:100%;
  max-width:900px;
  height:5px;
  margin:25px auto;
  border-radius:3px;
  background: var(--divider);
}


.expand-handle{
  margin-top:8px;
  text-align:center;
  font-size:16px;
  font-family:monospace;
  color: var(--text-muted);
  cursor:pointer;
}


.spec-details{
  display:none;
  margin-top:6px;
  text-align:center;
  font-size:13px;
  line-height:1.5;
  color: var(--spec-text);
}


.update-note{
  margin-top:30px;
  font-size:12px;
  color:gray;
}


footer{
  margin-top:50px;
  padding:15px;
  font-size:14px;
  background: var(--footer-bg);
  color: var(--footer-text);
}


/* ---------- Queue / Extra Notes ---------- */
.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{
  padding:0;
  border:0;
  background:transparent;
  font-size:12px;
  color:#2196F3;
  cursor:pointer;
}


.link-btn.blue:hover{
  text-decoration:underline;
}


/* ---------- Background Card Variant ---------- */
.machine-card.bg-card{
  position:relative;
  overflow:hidden;
  min-height:60px;
  margin-bottom:18px;
  padding:14px 20px;
  border-radius:12px;
  text-align:left;
  font-size:14px;
  background:none;
  border:1px solid var(--panel-border);
}


.machine-card.bg-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  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));
}


.machine-card.bg-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background: var(--bgcard-overlay);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}


.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: var(--bgcard-title);
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}


.machine-card.bg-card .spec-details{
  position:relative;
  z-index:2;
  display:none;
  padding:10px 12px;
  border-radius:10px;
  background: var(--bgcard-spec-bg);
  color: var(--text-soft);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}


.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.rice:hover,
.machine-card.bg-card .action .status-btn.blue:hover{
  background:#EADFC8;
}


.machine-card.bg-card .action .status-btn.rice:active,
.machine-card.bg-card .action .status-btn.blue:active{
  background:#E1D3B6;
}


.machine-card.bg-card .action .status-btn.rice:disabled,
.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;
}


/* ---------- Extend Inline ---------- */
.extend-inline{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:nowrap;
  max-width:260px;
  margin:6px auto 8px;
  padding:0 2px;
}


.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;
  padding:0;
  line-height:1;
  border:1px solid #cfead8;
  border-radius:10px;
  background:#e9f9ef;
  cursor:pointer;
}


.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{
  --toast-life: 2.4s;
  --toast-out: .18s;
  position:fixed;
  top:64px;
  right:24px;
  z-index:99999;
  padding:10px 14px;
  border-radius:10px;
  font-size:13px;
  background:#10b981;
  color:#fff;
  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); }
}


/* ---------- Notify Wrap ---------- */
.cd-notify-wrap{
  position:fixed;
  top:calc(var(--hdr-h) + 12px);
  right:16px;
  z-index:9999;
  width:min(420px,92vw);
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}


@media (max-width:640px){
  .cd-notify-wrap{
    left:50%;
    right:auto;
    width:min(520px,calc(100% - 24px));
    align-items:center;
    transform:translateX(-50%);
  }
}


/* ---------- Glass Note ---------- */
.cd-note{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  max-height:500px;
  margin:0;
  padding:10px 12px;
  border-radius:14px;
  pointer-events:auto;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  opacity:0;
  transform:translateY(-6px);
  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-size:14px;
  font-weight:600;
  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;
  flex:0 0 auto;
  width:24px;
  height:24px;
  margin-left:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid currentColor;
  border-radius:50%;
  opacity:.95;
  font-weight:700;
  line-height:1;
}


.cd-note .icon:empty::before{
  content:"";
  font-size:14px;
  transform:translateY(-1px);
}


.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:"×"; }


.cd-note .close{
  order:4;
  margin-left:4px;
  padding:4px;
  border:0;
  background:transparent;
  font-size:16px;
  color:#475569;
  opacity:.7;
  cursor:pointer;
}


/* ---------- Success Ping ---------- */
.cd-success-ping{
  --inline-life: 1.8s;
  position:absolute;
  top:-6px;
  right:-6px;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#22c55e;
  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; }
}


/* ---------- Notification Bell ---------- */
.user-info .notify{
  position:relative;
  display:inline-block;
}


.notify-bell{
  width:30px;
  height:30px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#fff;
  display:inline-grid;
  place-items:center;
  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);
}


/* ---------- Notification Tray ---------- */
.cd-tray{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:10000;
  width:min(420px,94vw);
  max-height:0;
  padding:8px;
  overflow:hidden;
  border-radius:12px;
  background:rgba(255,255,255,.25);
  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);
  transition:
    opacity .16s ease,
    transform .16s ease,
    max-height .22s ease;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}


.cd-tray.open{
  max-height:70vh;
  overflow:auto;
  opacity:1;
  transform:none;
}


.notice-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:6px 0;
  padding:10px 12px;
  border-radius:10px;
  text-align:left;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.05);
}


.notice-item .title{
  font-size:14px;
  font-weight:700;
  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{
  padding:12px;
  text-align:center;
  font-size:12px;
  color:#666;
}


.notice-chip{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  border-radius:999px;
  font-size:11px;
  line-height:16px;
  background:#FFEFD2;
  color:#8a4b00;
  border:1px solid #ffdb97;
}


/* prevent clipping */
#user,
.topbar,
.nav,
.nav-right,
header{
  overflow:visible !important;
}


/* ---------- Container Pill ---------- */
.cd-ctr{
  --pill-h: 24px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:156px;
  height:var(--pill-h);
  padding:0 12px;
  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{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:600;
}


.cd-ctr .ver{
  flex:0 0 auto;
  margin-left:4px;
  opacity:.65;
  font-weight:500;
}


.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{
  position:relative;
  background:#E9FBEE !important;
  border-color:#C5F0D1 !important;
  color:#0F8A2E !important;
  box-shadow:none;
  transform:none;
}


.cd-ctr.cd-locked{
  pointer-events:none;
  cursor:default;
}


.cd-ctr.green::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:.9;
  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;
}


@keyframes cd-sweep-ltr{
  0%   { background-position:-200% 0; }
  45%  { background-position:200% 0; }
  100% { background-position:200% 0; }
}


/* ---------- Container Pop ---------- */
.cd-pop{
  position:fixed;
  z-index:9999;
  min-width:286px;
  padding:8px;
  border-radius:12px;
  background:rgba(255,255,255,.25);
  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;
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
}


.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 Modal ---------- */
.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;
  top:50%;
  left:50%;
  z-index:10001;
  width:min(520px,calc(100vw - 32px));
  max-height:min(80vh,620px);
  display:flex;
  flex-direction:column;
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  transform:translate(-50%,-46%) scale(.96);
  opacity:.01;
  transition:
    transform .16s cubic-bezier(.2,.9,.2,1),
    opacity .16s ease;
  backdrop-filter:blur(16px) saturate(1.1);
}


.cd-modal.open{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
}


.cd-modal .hd{
  margin-bottom:10px;
  font-size:16px;
  font-weight:700;
}


.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;
  justify-content:flex-end;
  gap:10px;
  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{
  margin-bottom:10px;
  padding:10px 12px;
  border-radius:10px;
  background:#fff5f5;
  border:1px solid #ffd9d9;
  color:#7a1e1e;
}


.cd-modal .danger strong{
  display:block;
  margin-bottom:4px;
  font-weight:700;
}


.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;
}


/* ---------- PASS / VIP Badge ---------- */
.cd-pass-badge{
  --pct: 0%;
  position:relative;
  z-index:1;
  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-size:12.5px;
  font-weight:900;
  line-height:1;
  letter-spacing:.6px;
  transform:translateY(-1px);
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
}


.cd-pass-badge i{
  font-size:14px;
  line-height:1;
}


.cd-pass-badge:hover{
  transform:translateY(-2px);
}


.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);
}


.cd-pass-badge.on{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  color:#0b0f14;
  background:transparent;
  filter:none;
  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;
  z-index:-1;
  border-radius:999px;
  background:linear-gradient(135deg,#ff63d8 0%,#7c7cff 45%,#31d0ff 100%);
  transform:translateZ(0);
}


.cd-pass-badge::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:3px;
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.30);
}


.cd-pass-badge .prog{
  position:absolute;
  left:10px;
  right:10px;
  bottom:3px;
  width:auto;
  height:3px;
  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));
}


.cd-pass-pop{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:10000;
  width:290px;
  padding:12px 12px 10px;
  overflow:hidden;
  border-radius:12px;
  text-align:left;
  color:rgba(15,18,22,.92);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 18px 55px rgba(0,0,0,.32);
  opacity:0;
  transform:translateY(-6px) scale(.98);
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
}


@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,
.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{
  margin-top:6px;
  opacity:.72;
  font-weight:800;
}


.cd-pass-pop::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:rgba(15,18,22,.10);
}


.cd-pass-pop::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width: var(--pct);
  height:3px;
  background:linear-gradient(90deg, rgba(15,18,22,.92), rgba(15,18,22,.45));
}


.cd-pass-badge.on .cd-pass-pop::after{
  background:linear-gradient(90deg,#ff63d8 0%,#7c7cff 50%,#31d0ff 100%);
}


.cd-pass-pop .bar{
  display:none !important;
}


/* ---------- ORG Badge ---------- */
.cd-org-badge{
  --pct: 100%;
  --p: 1;
  position:relative;
  z-index:1;
  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-size:12.5px;
  font-weight:900;
  line-height:1;
  letter-spacing:.6px;
  transform:translateY(-1px);
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
}


.cd-org-badge i{
  font-size:14px;
  line-height:1;
}


.cd-org-badge:hover{
  transform:translateY(-2px);
}


.cd-org-badge.off{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.82);
}


.cd-org-badge.off:hover{
  background:rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}


.cd-org-badge.on{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  color:#0b0f14;
  background:transparent;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 12px 40px rgba(125,211,252,.22),
    0 10px 24px rgba(253,230,138,.18);
}


.cd-org-badge.on::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:-1;
  border-radius:999px;
  background:linear-gradient(135deg,#7dd3fc 0%, #fde68a 100%);
  transform:translateZ(0);
}


.cd-org-badge::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:3px;
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.30);
}


.cd-org-badge .prog{
  position:absolute;
  left:10px;
  right:10px;
  bottom:3px;
  width:auto;
  height:3px;
  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, 1));
}


.cd-org-pop{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:10000;
  width:290px;
  padding:12px 12px 10px;
  overflow:hidden;
  border-radius:12px;
  text-align:left;
  color:rgba(15,18,22,.92);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 18px 55px rgba(0,0,0,.32);
  opacity:0;
  transform:translateY(-6px) scale(.98);
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
}


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


.cd-org-badge:hover .cd-org-pop,
.cd-org-badge:focus-visible .cd-org-pop,
.cd-org-badge.open .cd-org-pop{
  opacity:1;
  transform:none;
  pointer-events:auto;
}


.cd-org-pop .line{
  display:block;
  font-size:12px;
  font-weight:900;
}


.cd-org-pop .meta{
  margin-top:6px;
  opacity:.72;
  font-weight:800;
}


.cd-org-pop::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:rgba(15,18,22,.10);
}


.cd-org-pop::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width: var(--pct);
  height:3px;
  background:linear-gradient(90deg,#7dd3fc 0%, #fde68a 100%);
}


/* ---------- Beta Pill ---------- */
.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 Metrics Card ---------- */
.my-metrics-card,
#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{
  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);
}


#my-metrics-card.open{
  max-height:820px;
  opacity:1;
  transform:translateY(0);
}


.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;
}


.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;
}


.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{
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  font-size:12px;
  font-weight:700;
}


.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;
}


.status-btn.mini{
  padding:8px 12px;
  border-radius:10px;
  font-size:12px;
}


#my-metrics-restart{
  cursor:pointer;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}


#my-metrics-restart.status-btn.mini{
  position:relative;
  overflow:hidden;
  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);
}


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


#my-metrics-restart.status-btn.mini::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.55;
  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%;
  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:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}


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


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


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


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


.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;
  }
}


.m-item{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:
    0 10px 24px rgba(0,0,0,.06),
    0 1px 0 rgba(255,255,255,.70) inset;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}


.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;
}


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


.m-bar > span{
  display:block;
  width:0%;
  height:100%;
  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;
}


.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%; }
}


.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;
}


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


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


.ring-wrap::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:0;
  border-radius:999px;
  opacity:.55;
  filter: blur(1px);
  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
    );
  animation: cd-ring-spin 12s linear infinite;
}


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


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


.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{
  z-index:1;
  width:44px;
  height:44px;
  transform:rotate(-90deg);
}


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;
  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));
}


/* ---------- Ad Card ---------- */
.machine-card.bg-card.ad-card .ad-title{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}


.machine-card.bg-card.ad-card .ad-logo{
  flex:0 0 auto;
  width:44px;
  height:44px;
  object-fit:cover;
}


.machine-card.bg-card.ad-card .ad-title h2{
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


@media (max-width:520px){
  .machine-card.bg-card.ad-card .ad-logo{
    width:38px;
    height:38px;
    border-radius:9px;
  }
}


/* ---------- Special Button Theme ---------- */
.status-btn.dsai-blue{
  color:#EAF6FF;
  border:1px solid rgba(120,190,255,.35);
  background: linear-gradient(180deg, #0B2A4A 0%, #06203A 100%);
  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}


.status-btn.dsai-blue:hover{
  transform:translateY(-1px);
  border-color: rgba(120,190,255,.55);
  background: linear-gradient(180deg, #0E355E 0%, #07294A 100%);
  box-shadow:
    0 14px 28px rgba(0,0,0,.22),
    0 0 0 3px rgba(80,170,255,.18);
}


.status-btn.dsai-blue:active{
  transform:translateY(0);
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    inset 0 2px 10px rgba(0,0,0,.25);
}


.status-btn.dsai-blue:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(80,170,255,.35),
    0 14px 28px rgba(0,0,0,.22);
}


.status-btn.dsai-sky{
  color:#05324D;
  border:1px solid rgba(40,160,255,.45);
  background: linear-gradient(180deg, #DDF3FF 0%, #A9DBFF 100%);
  box-shadow:
    0 10px 22px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.65);
}


.status-btn.dsai-sky:hover{
  transform:translateY(-1px);
  border-color: rgba(40,160,255,.70);
  background: linear-gradient(180deg, #E8F8FF 0%, #B7E2FF 100%);
  box-shadow:
    0 14px 28px rgba(0,0,0,.14),
    0 0 0 3px rgba(40,160,255,.18);
}


.status-btn.dsai-sky:active{
  transform:translateY(0);
  box-shadow:
    0 8px 18px rgba(0,0,0,.12),
    inset 0 2px 10px rgba(0,0,0,.18);
}


.status-btn.dsai-sky:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(40,160,255,.28),
    0 14px 28px rgba(0,0,0,.14);
}


/* ---------- Theme Mappings ---------- */
.cd-note,
.cd-tray,
.cd-pop,
.cd-modal,
.notice-item{
  color: var(--popup-text);
  border-color: var(--popup-border);
}


.cd-note,
.cd-tray,
.cd-pop,
.cd-modal{
  background: var(--popup-bg);
}


.notice-item{
  background: var(--popup-bg-strong);
}


.notice-item .title,
.cd-note .title{
  color: var(--popup-text);
}


.notice-item .body,
.notice-item .meta,
.cd-note .msg{
  color: var(--popup-subtext);
}


.my-metrics-head .tag{
  background: var(--metrics-chip);
  color: var(--metrics-text);
}


.my-metrics-head .name{
  color: var(--metrics-text);
}


.my-metrics-head .sub,
.my-metrics-head .endtime,
.m-value{
  color: var(--metrics-sub);
}


.m-item{
  background: var(--metrics-item-bg);
  border:1px solid var(--metrics-item-border);
}


.m-bar{
  background: var(--metrics-bar-track);
}


svg.ring circle.bg{
  stroke: var(--metrics-ring-track);
}


/* ---------- Theme Transition ---------- */
body,
.top-nav,
nav a,
.dropdown-btn,
.dropdown-content,
.dropdown-content a,
.machine-card,
.spec-details,
.card-divider,
footer,
input,
button,
.notice-item,
.cd-note,
.cd-tray,
.cd-pop,
.cd-modal,
.my-metrics-card,
.m-item,
.expand-handle,
.price-label,
.refresh-label{
  transition:
    background-color var(--theme-dur) var(--theme-ease),
    color var(--theme-dur) var(--theme-ease),
    border-color var(--theme-dur) var(--theme-ease),
    box-shadow var(--theme-dur) var(--theme-ease),
    fill var(--theme-dur) var(--theme-ease),
    stroke var(--theme-dur) var(--theme-ease);
}


/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce){
  body,
  .top-nav,
  nav a,
  .dropdown-btn,
  .dropdown-content,
  .dropdown-content a,
  .machine-card,
  .spec-details,
  .card-divider,
  footer,
  input,
  button,
  .notice-item,
  .expand-handle,
  .price-label,
  .refresh-label,
  #my-metrics-card,
  .m-bar > span,
  .ring-wrap::before,
  #my-metrics-restart.status-btn.mini::after{
    transition:none !important;
    animation:none !important;
    transform:none !important;
  }
}

/* =========================
   CloudDock Dashboard – patch
   ========================= */


/* 通知容器：给 --hdr-h fallback，避免变量缺失时直接炸定位 */
.cd-notify-wrap{
  top: calc(var(--hdr-h, 64px) + 12px);
}


/* toast / ping 时长优先吃 root 变量 */
.cd-toast{
  animation:
    cd-toast-in .16s ease-out forwards,
    cd-toast-out var(--toast-out, .25s) ease-in forwards var(--toast-life, 5s);
}


.cd-success-ping{
  animation: cd-ping-hold var(--inline-life, 5s) ease-out forwards;
}


/* tray / pop 恢复“通透毛玻璃”，不要跟 modal 共用 popup-bg */
.cd-tray,
.cd-pop{
  background: var(--float-bg) !important;
  border-color: var(--float-border) !important;
}


/* 托盘里条目也别太厚 */
.notice-item{
  background: var(--float-bg-strong) !important;
  border-color: var(--float-item-border) !important;
}


/* hover 反馈也恢复轻一点 */
.cd-pop .item:hover{
  background: var(--float-hover);
}


/* Restart modal 的 cancel/secondary 按钮 */
.cd-btn{
  background: var(--modal-btn-bg);
  color: var(--modal-btn-text);
  border-color: var(--modal-btn-border);
}


.cd-btn:not(.primary):hover{
  background: var(--modal-btn-hover);
}


/* primary 保持蓝色，不被上面覆盖坏 */
.cd-btn.primary{
  color:#fff;
}

/* =========================
   HUD notify animation restore
   放在整份 CSS 最底部
   ========================== */


.cd-note{
  transition:
    opacity .22s ease,
    transform .22s ease,
    max-height .22s ease,
    padding .22s ease,
    background-color var(--theme-dur) var(--theme-ease),
    color var(--theme-dur) var(--theme-ease),
    border-color var(--theme-dur) var(--theme-ease),
    box-shadow var(--theme-dur) var(--theme-ease);
}




.cd-tray{
  transition:
    opacity .16s ease,
    transform .16s ease,
    max-height .22s ease,
    background-color var(--theme-dur) var(--theme-ease),
    border-color var(--theme-dur) var(--theme-ease),
    box-shadow var(--theme-dur) var(--theme-ease);
}


.cd-pop{
  transition:
    opacity .14s ease,
    transform .14s ease,
    background-color var(--theme-dur) var(--theme-ease),
    border-color var(--theme-dur) var(--theme-ease),
    box-shadow var(--theme-dur) var(--theme-ease);
}


.cd-modal{
  transition:
    transform .16s cubic-bezier(.2,.9,.2,1),
    opacity .16s ease,
    background-color var(--theme-dur) var(--theme-ease),
    border-color var(--theme-dur) var(--theme-ease),
    box-shadow var(--theme-dur) var(--theme-ease);
}


.notice-item{
  transition:
    background-color var(--theme-dur) var(--theme-ease),
    color var(--theme-dur) var(--theme-ease),
    border-color var(--theme-dur) var(--theme-ease),
    box-shadow var(--theme-dur) var(--theme-ease);
}


/* =========================
   Top HUD: refresh + daily cap
   ========================= */


.top-refresh-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 40px 10px;
  font-family:Arial,sans-serif;
}


.refresh-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}


.daily-cap-hud{
  flex:1 1 auto;
  min-width:320px;
  max-width:520px;
  padding:0;
  border-radius:0;
  text-align:left;
  background:transparent;
  border:0;
  box-shadow:none;
}



.daily-cap-head{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}


.daily-cap-title{
  flex:0 0 auto;
  font-size:13px;
  font-weight:700;
  color:var(--text-main);
}


.daily-cap-usage{
  flex:1 1 auto;
  min-width:0;
  text-align:right;
  font-size:13px;
  font-weight:700;
  color:var(--text-main);
  white-space:nowrap;
}


.daily-cap-usage .slash{
  opacity:.45;
  padding:0 4px;
}


.daily-cap-bar{
  position:relative;
  margin-top:8px;
  width:100%;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:var(--refresh-track);
}



.daily-cap-bar > span{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#22c55e 0%, #31d0ff 55%, #7c7cff 100%);
  transition:width .28s cubic-bezier(.2,.9,.2,1);
}


.daily-cap-meta{
  margin-top:6px;
  font-size:12px;
  color:var(--text-muted);
  line-height:1.3;
}



.daily-cap-hud.is-exempt .daily-cap-bar > span{
  width:100%;
  background:linear-gradient(90deg,#7dd3fc 0%, #fde68a 100%);
}


.daily-cap-hud.is-exempt .daily-cap-meta{
  color:var(--text-soft);
}


/* info button */
.daily-cap-info-wrap{
  position:relative;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
}


.daily-cap-info-btn{
  width:24px;
  height:24px;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--text-muted);
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  transition:background .12s ease, color .12s ease, transform .12s ease;
}


.daily-cap-info-btn:hover{
  background:rgba(127,127,127,.10);
  color:var(--text-main);
  transform:translateY(-1px);
}


.daily-cap-info-btn i{
  font-size:14px;
  line-height:1;
}


/* pop tray */
.daily-cap-pop{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:10020;
  width:300px;
  padding:12px;
  border-radius:12px;
  text-align:left;
  color:var(--popup-text);
  background:var(--float-bg-strong);
  border:1px solid var(--float-border);
  box-shadow:0 18px 55px rgba(0,0,0,.22);
  opacity:0;
  transform:translateY(-6px) scale(.98);
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease,
             background-color var(--theme-dur) var(--theme-ease),
             border-color var(--theme-dur) var(--theme-ease),
             box-shadow var(--theme-dur) var(--theme-ease);
  -webkit-backdrop-filter:blur(14px) saturate(1.12);
  backdrop-filter:blur(14px) saturate(1.12);
}


.daily-cap-info-wrap:hover .daily-cap-pop,
.daily-cap-info-wrap.open .daily-cap-pop{
  opacity:1;
  transform:none;
  pointer-events:auto;
}


.daily-cap-pop-title{
  display:block;
  font-size:13px;
  font-weight:800;
  color:var(--popup-text);
}


.daily-cap-pop-sub{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.35;
  color:var(--popup-subtext);
}


.daily-cap-exp-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  font-size:11px;
  font-weight:700;
  color:var(--popup-subtext);
}


.daily-cap-exp-row .left{
  text-align:left;
}


.daily-cap-exp-row .right{
  text-align:right;
}


.daily-cap-exp-bar{
  display:block;
  margin-top:6px;
  width:100%;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(127,127,127,.16);
}


.daily-cap-exp-bar .fill{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#22c55e 0%, #31d0ff 55%, #7c7cff 100%);
  transition:width .28s cubic-bezier(.2,.9,.2,1);
}


.daily-cap-pop-note{
  display:block;
  margin-top:10px;
  font-size:11.5px;
  line-height:1.45;
  color:var(--popup-subtext);
}


.daily-cap-hud.is-exempt .daily-cap-exp-bar .fill{
  width:100%;
  background:linear-gradient(90deg,#7dd3fc 0%, #fde68a 100%);
}


/* mobile */
@media (max-width:760px){
  .top-refresh-bar{
    flex-direction:column;
    align-items:stretch;
    padding:16px 18px 8px;
  }


  .refresh-left{
    justify-content:flex-start;
  }


  .daily-cap-hud{
    min-width:0;
    max-width:none;
  }


  .daily-cap-pop{
    right:auto;
    left:0;
    width:min(300px, calc(100vw - 48px));
  }
}

.balance-wrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:4px;
}


.balance-add-btn{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.08);
  color:#fff;
  text-decoration:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(0,0,0,.14);
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.balance-add-btn i{
  font-size:13px;
  line-height:1;
}


.balance-add-btn:hover{
  transform:translateY(-1px) scale(1.04);
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.42);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}


.balance-add-btn:active{
  transform:scale(.96);
}

/* =========================
   Dashboard header / notify fixes
   ========================= */


/* bug 1: header 中间导航真正居中 */
.top-nav{
  position: relative;
  justify-content: flex-start; /* 不再用 space-between 拉偏中间 nav */
}


.logo-container{
  flex: 0 0 200px;
}


.top-nav > nav{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 0;
}


.top-nav > nav a{
  margin: 0;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.user-info{
  margin-left: auto;
  position: relative;
  z-index: 2;
}


/* 小屏别硬顶中间，避免撞车 */
@media (max-width: 900px){
  .top-nav{
    flex-wrap: wrap;
    row-gap: 10px;
  }


  .top-nav > nav{
    position: static;
    left: auto;
    top: auto;
    transform: none;
    order: 3;
    width: 100%;
    justify-content: center;
  }
}




/* bug 2: notification 铃铛 hover / icon 居中 */
.notify-bell{
  padding: 0;               /* 你全局 button padding 把它顶歪了 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}


.notify-bell i{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 1;
  font-size: 18px;
}




/* bug 3: notification 倒计时条圆角跟卡片一致，不再凸出去 */
.cd-note{
  overflow: hidden;
}


.cd-note .bar{
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}