:root{
  --primary: rgb(141,205,78);
  --ink: #0f172a;
  --muted: #6b7280;
  --muted-2: #9ca3af;

  /* "Almost white, slightly beige" background */
  --bg: #fbfaf6;

  --card: #ffffff;
  --line: rgba(15,23,42,.10);

  --shadow: 0 16px 42px rgba(15,23,42,.10);
  --shadow-soft: 0 10px 26px rgba(15,23,42,.08);

  --radius: 18px;
}
.link-green{  
color: rgb(141,205,78);
  font-size:12px;
  letter-spacing:.2px;       /* ??? */
  text-decoration: none;
  font-weight: 600;
  transition: color .18s ease, opacity .18s ease;
  cursor: pointer;
	text-decoration: none;
}

*{ box-sizing:border-box; }
:root{
 --nav-right: 100vh;
}
html, body{margin: 0;}
html{
  overflow-x: clip;
  overflow-y: clip;
}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
  width:1536px;
  overflow-y: auto;
  
}
.main{ overflow-x:auto; }
/* optional ultra-soft texture */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background-image: radial-gradient(circle at 1px 1px, rgba(15,23,42,.02) 1px, transparent 0);
  background-size: 22px 22px;
  opacity: .45;
}

/* Top bar: style only (no sizing / max-width / padding here) */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.viewport{
  height: var(--nav-right);
  overflow-y: auto;      
  overflow-x: hidden;
  width:1530px;
}
/* topbar-inner ? max-width / padding ??? HTML inline */
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position: relative;
}


.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
button.btn:disabled,
button.btn.disabled {
  background: #6b7280;          /* ??????? */
  color: #fff;
  opacity: 0.55;
  cursor: not-allowed;
  border-color: transparent;

  /* ?? */
  pointer-events: none;
}
/* ?????????????? */
.auth-page { position: relative; }

/* ???? 2 ?????? */
.auth-msg-float{

  font-size: 10px;
  line-height: 1.2;
}
.success-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,.72); /* dark */
  backdrop-filter: blur(6px);
}

.confetti-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.success-card{
  position: relative;
  width: min(520px, calc(100% - 40px));
  border-radius: 16px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 30px 90px rgba(0,0,0,.25);
  padding: 18px 18px 16px;
  text-align: center;
}

.success-title{
  font-weight: 850;
  font-size: 20px;
  letter-spacing: .2px;
}

.success-sub{
  margin-top: 8px;
  color: rgba(107,114,128,.95);
  font-size: 12.8px;
  line-height: 1.5;
}


/* brand-mark ? width/height ??? HTML inline */
.brand-mark{
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position: relative;
}
.btn.disabled,
.btn.disabled {
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}


.brand-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.brand-fallback{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color: rgba(15,23,42,.55);
  font-size:12px;
  letter-spacing:.6px;
  user-select:none;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:14px;
}
/* ???:????+?? */
.chip.is-authed{
  border-color: rgb(141,205,78) !important;
  color: rgb(141,205,78) !important;
}

/* dot ??? */
.dot.on{
  background: rgb(141,205,78) !important;
  box-shadow: 0 0 0 3px rgba(141,205,78,.18);
}
/* ===== Profile page ===== */

.profile-hero{
  display:flex;
  align-items:center;
  gap:16px;
  padding: 10px 6px 14px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.profile-avatar-btn{
  position: relative;
  width: 112px;
  height: 112px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
}

.profile-avatar{
  width: 112px;
  height: 112px;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 18px 46px rgba(15,23,42,.14);
  border: 3px solid rgba(255,255,255,.95);
  outline: 1px solid rgba(15,23,42,.14);
  display:block;
}

.profile-avatar-ring{
  position:absolute;
  inset: -4px;
  border-radius: 999px;
  pointer-events:none;
  box-shadow: 0 0 0 6px rgba(141,205,78,.16);
  opacity: 0;
  transition: opacity .18s ease;
}

.profile-avatar-hint{
  position:absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: rgba(15,23,42,.7);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(15,23,42,.10);
}

.profile-avatar-btn:hover .profile-avatar-ring{
  opacity: 1;
}

.profile-meta{
  flex: 1;
  min-width: 0;
}

.profile-name-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.name-wrap{
  flex: 1;          /* ?????? */
  min-width: 0;     /* ?? ???,?? ellipsis ??? */
}
.profile-username{
  font-size: 22px;
  font-weight: 850;
  letter-spacing: .2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
   display: block;

}
.profile-mini-btn{
  flex-shrink: 0;          /* ? ?????????? */
  padding: 8px 12px;
  border-radius: 999px;
  min-width: 300px;         /* ? ????????/?? */
  justify-content: center; /* ?? .btn ? flex,????? */
  gap: 8px;
}


.profile-kv{
  margin-top: 8px;
  display:grid;
  gap: 6px;
}

.kv{
  display:flex;
  gap:10px;
  align-items:center;
  font-size: 12.5px;
}
.kv .k{
  color: rgba(107,114,128,.92);
  width: 60px;
  flex: 0 0 auto;
  font-weight: 700;
}
.kv .v{
  color: rgba(15,23,42,.86);
  font-weight: 650;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 14px;
}



.profile-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 42px rgba(15,23,42,.08);
  padding: 14px;
}

.profile-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.profile-card-title{
  font-size: 13px;
  font-weight: 850;
  color: rgba(15,23,42,.86);
  letter-spacing: .2px;
}

.profile-bio{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(15,23,42,.84);
  background: rgba(15,23,42,.02);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 12px;
  min-height: 120px;
  white-space: pre-wrap;
}

.profile-bio-hint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(107,114,128,.86);
}

.profile-actions{
  display:grid;
  gap: 10px;
}

.profile-small-note{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(107,114,128,.85);
}

/* ===== Modals ===== */
.profile-modal{
  padding: 14px 14px 12px;
}

.profile-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.profile-modal-title{
  font-weight: 850;
  letter-spacing: .2px;
}

.profile-x{
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  color: rgba(107,114,128,.9);
}

.profile-modal-body{
  padding-top: 12px;
}

.profile-modal-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  justify-content:flex-end;
}

.crop-stage{
  margin-top: 10px;
  display:grid;
  gap: 10px;
}

#cropCanvas{
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
}

.crop-controls{
  display:grid;
  gap: 8px;
}

.crop-row{
  display:flex;
  gap: 10px;
  align-items:center;
}

.crop-label{
  width: 46px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(107,114,128,.92);
}

.crop-tip{
  font-size: 12px;
  color: rgba(107,114,128,.86);
}

.chip{
  font-size:12px;
  color: var(--muted);
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  padding:8px 10px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:8px;
}

.dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(156,163,175,.8);
}
.dot.on{
  background: var(--primary);
  box-shadow: 0 0 0 6px rgba(141,205,78,.18);
}

/* Avatar + dropdown */
.avatar-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* avatar ? width/height ??? HTML inline */
.avatar{
  border-radius:999px;
  border: 2px solid rgba(255,255,255,.95);
  outline: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
  overflow:hidden;
  cursor:pointer;
  box-sizing:border-box;
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.avatar-fallback{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color: rgba(15,23,42,.55);
  font-size:12px;
  letter-spacing:.6px;
  user-select:none;
}

/* menu ? top/width ??? HTML inline */
.menu{
  position:absolute;
  right:0;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.12);
  border-radius:16px;
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: translateY(6px);
  opacity:0;
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
}

.avatar-wrap:hover .menu{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

.menu-head{
  padding:12px 12px 10px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: #fff;
}

.menu-head .label{
  font-size:12px;
  color: var(--muted);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.menu-head .who{
  margin-top:6px;
  font-size:13px;
  font-weight:650;
  color: var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.menu-body{
  padding:10px 12px 12px;
  display:grid;
  gap:8px;
}

/* Buttons: style + hover animation layer (no width control here unless you want) */
.btn{
  position: relative;
  overflow: hidden;
  width:auto;
  border: 1px solid rgba(15,23,42,.12);
  background:#fff;
  color: var(--ink);
  padding:10px 12px;
  border-radius:12px;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  box-sizing:border-box;
  transition: border-color .5s ease, box-shadow .5s ease;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(141,205,78,0.95), rgba(141,205,78,0.80));
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 0;
}

.btn:hover::before{ opacity: 1; }

.btn > *{
  position: relative;
  z-index: 1;
}

.btn.primary{ border-color: rgba(141,205,78,.55); }
.btn.danger{ background: rgba(15,23,42,.03); }

.btn small{
  color: var(--muted);
  font-weight:600;
  font-size:12px;
}

/* main / grid ???????? HTML inline */


/* Panels: style only */
.panel{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  position: relative;
  min-width: 0;
}

/* ????????? hover ??:???? no-accent-hover ?? */
.panel:hover{
  border-color: rgba(141,205,78,.45);
}

.hint{
  position:absolute;
  left:14px;
  bottom:12px;
  color: rgba(107,114,128,.85);
  font-size:12px;
  letter-spacing:.2px;
}

/* ===== No accent hover (opt-out) ===== */
.panel.no-accent-hover:hover{
  border-color: rgba(15,23,42,.10) !important;
}
.btn.no-accent-hover:hover{
  border-color: rgba(15,23,42,.12) !important;
}

/* Responsive: ???????(???? grid-column ??? inline ?) */


/* Transparent hover bridge between avatar and menu */
.hover-bridge{
  position: absolute;
  left: 0;
  right: 0;

  /* bridge spans from avatar bottom to menu top */
  top: 10px;          /* avatar height */
  left:-120px;
  height: 42px;       /* gap size to cover (adjust if needed) */
  width:150px;
  background: transparent;
  pointer-events: none;   /* IMPORTANT: inactive by default */
}
/* Activate bridge only when menu is visible */
.avatar-wrap:hover .hover-bridge{
  pointer-events: auto;
}
/* ===== Auth UI ===== */
.auth-viewport{
  width: 100%;
  overflow: hidden;   /* ????,??????? */
  padding: 0;         /* ??:?? viewport ?? padding */
}


.auth-track{
  display:flex;
  width: 200%;
  transition: transform .42s cubic-bezier(.2,.8,.2,1); /* smooth slide */
  will-change: transform;
}

.auth-page{
  width: 50%;
  padding: 8px;       /* ????? viewport ? padding ???? */
  box-sizing: border-box;
}

/* Form pieces */
.field{ margin-top: 12px; }
.label{
  display:block;
  font-size:12px;
  color: rgba(107,114,128,.92);
  margin-bottom: 6px;
  font-weight: 650;
  letter-spacing: .2px;
}

.input{
  width: 100%;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  outline: none;
}

.input:focus{
  border-color: rgba(141,205,78,.55);
  box-shadow: 0 0 0 6px rgba(141,205,78,.16);
}

.helper{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(107,114,128,.86);
}
 .co-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
  }
  .co-big-btn {
    width: 100%;
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    /* remove shadow (user request) */
    box-shadow: none !important;
  }
  .co-big-btn img.co-btn-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: 0 0 auto;
    /* no shadow on icon */
    box-shadow: none !important;
  }
  /* make text block align like your profile buttons (span + small) */
  .co-big-btn .co-btn-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
  }
  :root{
    /* ? ??????:????/??,???? */
    --pdash-btn-h: 78px;
  }

  /* Producer sidebar */
  .pdash-side {
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pdash-side-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
  }

  .pdash-side-head img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
  }

  .pdash-side-title {
    font-weight: 900;
    font-size: 16px;
    letter-spacing: .2px;
  }

  .pdash-divider {
    height: 1px;
    background: rgba(15, 23, 42, .10);
    margin: 2px 2px 6px;
  }

  .pdash-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Buttons: reuse .btn, remove shadow, enforce same height */
 .pdash-btn {
  width: 100%;
  min-height: var(--pdash-btn-h);
  height: var(--pdash-btn-h);

  display: grid;
  grid-template-columns: 48px 1fr;   /* ?? ?????? */
  align-items: center;

  text-decoration: none;
  box-shadow: none !important;
  padding: 10px 12px;
}

  .pdash-btn .pdash-ico {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: 0 0 auto;
    box-shadow: none !important;
  }
.pdash-headcard{
    padding: 16px 14px;
    display:flex;
    flex-direction:column;
    gap: 10px;
  }
  .pdash-headrow{
    display:flex;
    align-items:center;
    gap: 10px;
  }
  .pdash-head-ico{
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
  }
  .pdash-head-title{
    font-weight: 900;
    font-size: 16px;
    letter-spacing: .2px;
  }

  /* Credits row (smaller than Producer) */
  .pdash-creditrow{
    display:flex;
    align-items:center;
    gap: 10px;
  }
  .pdash-credit-ico{
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 auto;
    opacity: .9;
  }
  .pdash-credit-text{
    display:flex;
    align-items: baseline;
    gap: 8px;
  }
  
  .pdash-chart-block{
    width: 560px;              /* ? ???????????(???) */
    max-width: 100%;
    padding: 18px 18px 14px;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.72);
  }
  .pdash-toprow{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding: 20px;
}
/* Right stats card (clickable) */
.pdash-stats-card{
  width: 520px;               /* ?????????????? */
  max-width: 100%;
  padding: 18px 18px 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  text-decoration: none;
  color: inherit;
  display: block;
  box-shadow: none !important;
}

.pdash-stats-card:hover{
  border-color: rgba(141,205,78,.55);
}

.pdash-stats-top{
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 170px;          /* ? ???????? */
}

.pdash-stats-ico{
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.pdash-stats-mid{
  display:flex;
  justify-content:center;     /* ? ?????? */
  align-items:center;
}

.pdash-stats-num{
  font-weight: 900;
  font-size: 46px;            /* ? ???? */
  letter-spacing: .3px;
  line-height: 1;
}

.pdash-stats-right{
  font-weight: 800;
  font-size: 14px;            /* ? ? Producer ? */
  opacity: .75;
  white-space: nowrap;
}

.pdash-stats-divider{
  height: 1px;
  background: rgba(15,23,42,.10);
  margin: 10px 0 12px;
}

/* Bottom smaller row */
.pdash-stats-bottom{
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 78px;           /* ? ???????? */
}

.pdash-mini{
  display:grid;
  grid-template-columns: 22px auto 1fr;
  align-items:center;
  gap: 10px;
}

.pdash-mini-ico{
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: .95;
}

.pdash-mini-num{
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  min-width: 0px;
  text-align: left;
}

.pdash-mini-text{
  font-weight: 800;
  font-size: 12px;
  opacity: .75;
  white-space: nowrap;
}

.pdash-mini-split{
  width: 1px;
  height: 44px;               /* ? ???? */
  background: rgba(15,23,42,.10);
  justify-self: center;
}
.pdash-chart-block2{
  width: 470px;
  max-width: 100%;
  padding: 18px 18px 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
}
  .pdash-chart-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .pdash-chart-title{
    font-weight: 900;
    font-size: 16px;
  }
  .pdash-chart-sub{
    font-weight: 700;
    font-size: 12px;
    opacity: .65;
  }
  .pdash-chart-canvas-wrap{
    width: 100%;
    overflow:hidden;
  }
  .pdash-credit-label{
    font-size: 12px;
    font-weight: 700;
    opacity: .75;
  }
  .pdash-credit-num{
    font-size: 14px;     /* ? ? Producer ? */
    font-weight: 900;
  }
  .pdash-btn .pdash-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    min-width: 0;
  }

  /* Active = green state */
  .pdash-btn.is-active {
    border-color: rgba(141,205,78,.75);
    background: rgba(141,205,78,.12);
  }
  .co-big-btn .co-btn-text span {
    font-weight: 800;
    line-height: 1.05;
  }
  .co-big-btn .co-btn-text small {
    opacity: .75;
    font-weight: 600;
  }
/* Buttons variants (reuse your .btn base) */
.btn.action-btn:hover::before{ opacity: 1; } /* green gradient layer already exists */
.btn.action-btn:hover{
  border-color: rgba(141,205,78,.55);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

/* Back button hover: gray */
.btn.back-btn::before{
  background: linear-gradient(180deg, rgba(15,23,42,.08), rgba(15,23,42,.05));
}
.btn.back-btn:hover::before{ opacity: 1; }
.btn.back-btn:hover{
  border-color: rgba(15,23,42,.18);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

/* Small "ghost" buttons (Send/Refresh) */
.btn.ghost-btn::before{ display:none; }
.btn.ghost-btn:hover{
  border-color: rgba(15,23,42,.18);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.link-green{
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
}
.link-green:hover{
  text-decoration: underline;
  cursor:pointer;
  box-sizing:border-box;
}
:root{ --ui-scale: 1; }
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 999;
  position: fixed;
  width:1536px;
  top: 0px;
}

.modal-card{
  width: min(520px, calc(100vw - 48px));
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(15,23,42,.18);
  padding: 16px 16px 14px;
}

.modal-text{
  font-size: 13px;
  color: rgba(15,23,42,.88);
  line-height: 1.45;
}

/* =====================
   Jobs Cockpit
===================== */
.jobs-shell{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:hidden;
}
.jobs-actionbar{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:stretch;
}
.jobs-cta-main{
  border:1px solid rgba(141,205,78,.45);
  border-radius:18px;
  background:linear-gradient(135deg, rgba(141,205,78,.2), rgba(141,205,78,.08));
  text-decoration:none;
  color:#0f172a;
  min-height:88px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:14px 18px;
}
.jobs-cta-main:hover{ box-shadow:0 8px 24px rgba(141,205,78,.18); }
.jobs-cta-title{ font-size:30px; font-weight:900; line-height:1; }
.jobs-cta-sub{ margin-top:8px; color:#475569; font-size:14px; }
.jobs-cta-side{ display:flex; gap:10px; align-items:center; }
.jobs-mini-btn{
  min-height:46px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  color:#0f172a;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  font-weight:700;
  cursor:pointer;
  box-sizing:border-box;
}
.jobs-mini-btn:hover{ border-color:rgba(141,205,78,.9); }
.jobs-kpis{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}
.jobs-kpi-card{
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  background-image: url("./scr/imgs/background_num.png");
  background-size: cover;        /* 关键 */
  background-position: center;   /* 居中 */
  background-repeat: no-repeat;  /* 不重复 */
  min-height:90px;
  padding:12px 14px;
}
.jobs-kpi-label{ color:#475569; font-size:13px; font-weight:700; }
.jobs-kpi-value{ margin-top:8px; font-size:34px; font-weight:900; color:#0f172a; line-height:1; }
.jobs-kpi-sub{ margin-top:6px; color:#64748b; font-size:12px; font-weight:700; }
.jobs-actions,
.jobs-list-panel{
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  background:#fff;
  padding:12px;
  height:270px;
}
.jobs-sec-head h3{ margin:0; font-size:20px; font-weight:900; color:#0f172a; }
.jobs-action-list{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.jobs-action-item{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 130px 96px;
  gap:10px;
  align-items:center;
}
.jobs-action-item.warning{ border-color:rgba(245,158,11,.45); }
.jobs-action-item.danger{ border-color:rgba(239,68,68,.45); }
.jobs-action-main{ min-width:0; }
.jobs-action-verb{ font-weight:800; color:#0f172a; }
.jobs-action-meta{
  margin-top:2px;
  color:#64748b;
  font-size:13px;
  line-height:1.35;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}
.jobs-action-right{
  color:#475569;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  text-align:right;
}
.jobs-action-go{
  border:1px solid rgba(141,205,78,.7);
  background:#fff;
  color:#0f172a;
  border-radius:999px;
  min-height:34px;
  min-width:88px;
  padding:0 14px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  box-sizing:border-box;
}
.jobs-action-go:hover{ background:rgba(141,205,78,.12); }
.jobs-tabs{ display:flex; gap:8px; border-bottom:1px solid rgba(15,23,42,.08); padding-bottom:10px; }
.jobs-tab{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  border-radius:999px;
  min-height:36px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  color:#334155;
  cursor:pointer;
  box-sizing:border-box;
}
.jobs-tab b{
  border-radius:999px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  background:#f1f5f9;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}
.jobs-tab.is-active{
  color:#0f172a;
  border-color:rgba(141,205,78,.9);
  background:rgba(141,205,78,.14);
}
.jobs-filters{
  margin-top:10px;
  display:grid;
  grid-template-columns:130px 110px 120px 120px 1fr;
  gap:8px;
  align-items:center;
}
.jobs-input{
  min-height:36px;
  border-radius:11px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  color:#0f172a;
  padding:0 10px;
  outline:none;
}
.jobs-input:focus{
  border-color:rgba(141,205,78,.85);
  box-shadow:0 0 0 3px rgba(141,205,78,.15);
}
.jobs-check{
  min-height:36px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:11px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 8px;
  color:#334155;
  font-weight:700;
}
.jobs-list{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  height:100px;
}
.job-card{
  border:1px solid rgba(15,23,42,.1);
  border-radius:16px;
  background:#fff;
  height:300px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:none;
}
.job-card-head{ display:flex; gap:8px; justify-content:space-between; align-items:flex-start; }
.job-title-wrap{ min-width:0; }
.job-title-wrap h4{ margin:0; font-size:18px; font-weight:900; color:#0f172a; overflow-wrap:anywhere; word-break:break-word; }
.job-title-wrap p{
  margin:6px 0 0;
  color:#64748b;
  font-size:13px;
  line-height:1.35;
  max-height:36px;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.job-status{
  border-radius:999px;
  border:1px solid rgba(15,23,42,.15);
  min-height:26px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.job-status.status-progress{ border-color:rgba(141,205,78,.8); background:rgba(141,205,78,.13); color:#365314; }
.job-status.status-ok{ border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.14); color:#166534; }
.job-status.status-partial{ border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.14); color:#92400e; }
.job-status.status-danger{ border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.14); color:#991b1b; }
.job-status.status-muted{ border-color:rgba(100,116,139,.35); background:rgba(100,116,139,.12); color:#334155; }
.job-status.status-open{ border-color:rgba(59,130,246,.4); background:rgba(59,130,246,.13); color:#1d4ed8; }
.job-card-meta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}
.job-card-meta div{ border:1px solid rgba(15,23,42,.08); border-radius:12px; padding:8px; }
.job-card-meta label{ display:block; color:#64748b; font-size:11px; font-weight:700; }
.job-card-meta b{ display:block; margin-top:5px; color:#0f172a; font-size:16px; }
.job-card-foot{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.job-public-id{
  color:#64748b;
  font-size:12px;
  font-weight:700;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.job-main-btn{
  border:1px solid rgba(141,205,78,.9);
  border-radius:999px;
  background:#fff;
  color:#0f172a;
  min-height:34px;
  padding:0 14px;
  font-weight:900;
  cursor:pointer;
  box-sizing:border-box;
}
.job-main-btn:hover{ background:rgba(141,205,78,.13); }
.job-main-btn:disabled{ opacity:.45; cursor:not-allowed; }
.jobs-loading,
.jobs-empty,
.jobs-error,
.jobs-empty-row{
  min-height:88px;
  border:1px dashed rgba(15,23,42,.16);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#64748b;
  font-weight:700;
  text-align:center;
  padding:10px;
}
.jobs-retry{
  margin-top:8px;
  border:1px solid rgba(141,205,78,.8);
  border-radius:999px;
  min-height:32px;
  padding:0 12px;
  background:#fff;
  font-weight:800;
  cursor:pointer;
  box-sizing:border-box;
}
.jobs-drawer{
  position:fixed;
  inset:0;
  z-index:55;
  pointer-events:none;
}
.jobs-drawer-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.3);
  opacity:0;
  transition:opacity .2s ease;
}
.jobs-drawer-panel{
  position:absolute;
  top:0;
  right:0;
  width:560px;
  max-width:96vw;
  height:100%;
  background:#fff;
  border-left:1px solid rgba(15,23,42,.12);
  transform:translateX(100%);
  transition:transform .24s ease;
  display:flex;
  flex-direction:column;
}
.jobs-drawer.is-open{ pointer-events:auto; }
.jobs-drawer.is-open .jobs-drawer-backdrop{ opacity:1; }
.jobs-drawer.is-open .jobs-drawer-panel{ transform:translateX(0); }
.jobs-drawer-head{
  min-height:72px;
  border-bottom:1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
}
.jobs-drawer-title{ font-size:22px; font-weight:900; color:#0f172a; }
.jobs-drawer-id{ margin-top:4px; color:#64748b; font-size:12px; font-weight:700; }
.jobs-drawer-close{
  border:1px solid rgba(15,23,42,.14);
  border-radius:10px;
  width:36px;
  height:36px;
  background:#fff;
  color:#0f172a;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  box-sizing:border-box;
}
.jobs-drawer-body{ padding:12px; overflow:auto; display:flex; flex-direction:column; gap:10px; }
.jobs-drawer-block{ border:1px solid rgba(15,23,42,.08); border-radius:14px; padding:10px; }
.jobs-drawer-block h4{ margin:0 0 8px; font-size:17px; font-weight:900; color:#0f172a; }
.jobs-summary-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.jobs-summary-grid div{ border:1px solid rgba(15,23,42,.08); border-radius:10px; padding:8px; }
.jobs-summary-grid label{ display:block; color:#64748b; font-size:12px; font-weight:700; }
.jobs-summary-grid b{ display:block; margin-top:5px; color:#0f172a; font-size:14px; }
.jobs-submit-box{ display:flex; flex-direction:column; gap:8px; }
.jobs-submission-list{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.jobs-submission-item{ border:1px solid rgba(15,23,42,.08); border-radius:10px; padding:8px; color:#334155; font-size:12px; }
.jobs-timeline{ display:flex; flex-direction:column; gap:7px; }
.jobs-timeline-item{ border:1px solid rgba(15,23,42,.08); border-radius:10px; padding:7px 8px; }
.jobs-timeline-item span{ display:block; color:#64748b; font-size:11px; font-weight:700; }
.jobs-timeline-item p{ margin:4px 0 0; color:#0f172a; font-size:13px; }
/* =====================
   Job Hunt
===================== */
.jobhunt-shell{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.jh-hero{
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  padding:14px;
  background:linear-gradient(180deg, rgba(141,205,78,.14), rgba(141,205,78,.05));
}
.jh-search-wrap{ display:grid; grid-template-columns:1fr auto; gap:8px; }
.jh-search{
  min-height:48px;
  border:1px solid rgba(141,205,78,.7);
  border-radius:999px;
  padding:0 16px;
  font-size:15px;
  outline:none;
}
.jh-search:focus{ box-shadow:0 0 0 4px rgba(141,205,78,.18); }
.jh-search-btn{
  min-height:48px;
  border-radius:999px;
  border:1px solid rgba(141,205,78,.85);
  background:#fff;
  padding:0 18px;
  font-weight:800;
  cursor:pointer;
  box-sizing:border-box;
}
.jh-quick-row{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.jh-chip{
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:#334155;
  font-weight:700;
  cursor:pointer;
  box-sizing:border-box;
}
.jh-chip.is-active{
  border-color:rgba(141,205,78,.9);
  background:rgba(141,205,78,.15);
  color:#0f172a;
}
.jh-match-row{ margin-top:10px; display:flex; align-items:center; gap:18px; }
.jh-match-switch{ display:inline-flex; align-items:center; gap:8px; font-weight:800; color:#1e293b; }
.jh-match-slider-wrap{ display:flex; align-items:center; gap:10px; }
.jh-match-slider-wrap input{ width:220px; accent-color:rgb(141,205,78); }


.jh-filters{
  top:88px;
  position:sticky;
  
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  background:#fff;
  padding:12px;
  max-height:calc(100vh - 110px);
  overflow:auto;
}
.jh-filters h3{ margin:0 0 10px; font-size:18px; font-weight:900; }
.jh-filter-block{ margin-bottom:10px; }
.jh-filter-block label{ display:block; margin-bottom:5px; color:#334155; font-size:13px; font-weight:800; }
.jh-filter-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.jh-input{
  min-height:36px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:10px;
  padding:0 10px;
  background:#fff;
  color:#0f172a;
  outline:none;
}
.jh-input:focus{ border-color:rgba(141,205,78,.85); box-shadow:0 0 0 3px rgba(141,205,78,.16); }
.jh-filter-list{ display:flex; flex-wrap:wrap; gap:6px; }
.jh-pill{
  min-height:28px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:#334155;
  font-size:12px;
  font-weight:700;
  padding:0 10px;
  cursor:pointer;
  box-sizing:border-box;
}
.jh-pill.is-active{ border-color:rgba(141,205,78,.85); background:rgba(141,205,78,.14); color:#0f172a; }
.jh-mini-empty{ color:#64748b; font-size:12px; }
.jh-reset-btn{
  width:100%;
  min-height:36px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:10px;
  background:#fff;
  font-weight:800;
  cursor:pointer;
  box-sizing:border-box;
}

.jh-content{
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  background:#fff;
  padding:12px;
}
.jh-sortbar{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.jh-sort-left{ display:flex; align-items:center; gap:8px; }
.jh-sort-left label{ font-weight:800; color:#334155; }
.jh-sort-right{ display:flex; gap:6px; }
.jh-view-btn{
  min-height:34px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  font-weight:800;
  padding:0 12px;
  cursor:pointer;
  box-sizing:border-box;
}
.jh-view-btn.is-active{ border-color:rgba(141,205,78,.85); background:rgba(141,205,78,.14); }
.jh-tooltip-wrap{ position:relative; }
.jh-info-btn{
  width:24px; height:24px; border-radius:50%; border:1px solid rgba(15,23,42,.25); background:#fff; cursor:pointer;
  font-size:12px; font-weight:900;
}
.jh-tooltip{
  position:absolute;
  top:30px;
  left:0;
  width:260px;
  padding:8px;
  border-radius:10px;
  background:#0f172a;
  color:#fff;
  font-size:12px;
  line-height:1.4;
  display:none;
  z-index:4;
}
.jh-tooltip.is-open{ display:block; }

.jh-feedback{
  min-height:0;
  margin-top:8px;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
}
.jh-feedback.is-ok{ padding:8px 10px; background:rgba(34,197,94,.14); color:#166534; }
.jh-feedback.is-error{ padding:8px 10px; background:rgba(239,68,68,.14); color:#991b1b; }

.jh-list{ margin-top:10px; }
.jh-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.jh-listmode{ display:flex; flex-direction:column; gap:10px; }

.jh-card{
  border:1px solid rgba(15,23,42,.1);
  border-radius:16px;
  background:#fff;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:220px;
  transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.jh-card:hover{
  border-color:rgba(141,205,78,.8);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  transform:translateY(-1px);
}
.jh-card.is-soon{ border-color:rgba(245,158,11,.55); }
.jh-card.is-expired{ opacity:.72; }
.jh-card-head{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.jh-card-head h4{ margin:0; font-size:19px; font-weight:900; color:#0f172a; }
.jh-match-badge{
  min-width:56px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(141,205,78,.8);
  background:rgba(141,205,78,.16);
  color:#365314;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:13px;
}
.jh-card-summary{
  margin:0;
  color:#64748b;
  font-size:13px;
  line-height:1.4;
  display:-webkit-box;
  line-clamp:2;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.jh-req-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.jh-req-col label{ display:block; margin-bottom:4px; color:#334155; font-size:12px; font-weight:800; }
.jh-mini-chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.jh-mini-chip{ border:1px solid rgba(15,23,42,.12); border-radius:999px; padding:2px 8px; font-size:11px; color:#334155; font-weight:700; }
.jh-metrics{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.jh-metrics div{ border:1px solid rgba(15,23,42,.08); border-radius:10px; padding:7px; }
.jh-metrics label{ display:block; color:#64748b; font-size:11px; font-weight:700; }
.jh-metrics b{ display:block; margin-top:3px; color:#0f172a; font-size:15px; }
.jh-metrics small{ display:block; margin-top:3px; color:#64748b; font-size:10px; }
.jh-card-foot{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.jh-public-id{ color:#64748b; font-size:12px; font-weight:700; }
.jh-card-btn,
.jh-apply-btn{
  min-height:34px;
  border-radius:999px;
  border:1px solid rgba(141,205,78,.9);
  background:#fff;
  color:#0f172a;
  font-weight:900;
  padding:0 14px;
  cursor:pointer;
  box-sizing:border-box;
}
.jh-card-btn.is-applied{ border-color:rgba(59,130,246,.45); color:#1d4ed8; background:rgba(59,130,246,.10); }

.jh-card-btn.is-owner{ border-color:rgba(100,116,139,.45); color:#475569; background:rgba(148,163,184,.16); cursor:not-allowed; }
.jh-card-btn:disabled,
.jh-apply-btn:disabled{ opacity:.5; cursor:not-allowed; }

.jh-skeleton{ min-height:220px; border-radius:16px; background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9); background-size:180% 100%; animation:jhSk 1.2s linear infinite; }
@keyframes jhSk{ 0%{background-position:0% 0} 100%{background-position:180% 0} }
.jh-empty-wide{
  grid-column:1 / -1;
  min-height:140px;
  border:1px dashed rgba(15,23,42,.16);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#64748b;
  font-weight:700;
  padding:12px;
}

.jh-drawer{ position:fixed; inset:0; z-index:55; pointer-events:none; }
.jh-drawer-backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.3); opacity:0; transition:opacity .2s ease; }
.jh-drawer-panel{
  position:absolute;
  top:0; right:0;
  width:560px; max-width:96vw; height:100%;
  background:#fff;
  border-left:1px solid rgba(15,23,42,.12);
  transform:translateX(100%);
  transition:transform .24s ease;
  display:flex;
  flex-direction:column;
}
.jh-drawer.is-open{ pointer-events:auto; }
.jh-drawer.is-open .jh-drawer-backdrop{ opacity:1; }
.jh-drawer.is-open .jh-drawer-panel{ transform:translateX(0); }
.jh-drawer-head{ min-height:72px; border-bottom:1px solid rgba(15,23,42,.08); padding:0 12px; display:flex; justify-content:space-between; align-items:center; }
.jh-drawer-title{ font-size:21px; font-weight:900; color:#0f172a; }
.jh-drawer-sub{ margin-top:4px; font-size:12px; color:#64748b; font-weight:700; }
.jh-drawer-close{ width:36px; height:36px; border-radius:10px; border:1px solid rgba(15,23,42,.14); background:#fff; font-size:22px; cursor:pointer; }
.jh-drawer-body{ padding:12px; overflow:auto; display:flex; flex-direction:column; gap:10px; }
.jh-drawer-block{ border:1px solid rgba(15,23,42,.08); border-radius:14px; padding:10px; }
.jh-drawer-block h4{ margin:0 0 8px; font-size:16px; font-weight:900; }
.jh-summary-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.jh-summary-grid div{ border:1px solid rgba(15,23,42,.08); border-radius:10px; padding:8px; }
.jh-summary-grid label{ display:block; color:#64748b; font-size:12px; font-weight:700; }
.jh-summary-grid b{ display:block; margin-top:4px; font-size:14px; color:#0f172a; }
.jh-drawer-tags{ margin-top:8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:#334155; }
.jh-drawer-tags b{ color:#0f172a; }
.jh-drawer-tags span{ border:1px solid rgba(15,23,42,.12); border-radius:999px; padding:2px 8px; font-size:12px; }
.jh-apply-bar{ border-top:1px solid rgba(15,23,42,.08); padding:10px 12px; }
.jh-apply-tip{ color:#334155; font-size:12px; font-weight:700; }
.jh-apply-actions{ margin-top:8px; display:grid; grid-template-columns:1fr auto; gap:8px; }

.jh-top-panel{ padding:0; }
.jh-left-panel, .jh-right-panel{ min-height:760px; }
.jh-left-panel{ padding:0; }
.jh-right-panel{ padding:0; }
.jh-content{ display:flex; flex-direction:column; }
.jh-results-viewport{ margin-top:8px; border:1px solid rgba(15,23,42,.08); border-radius:12px; padding:8px; height:calc(100vh - 255px); overflow:auto; background:#fff; }
.jh-pager-info{ min-height:30px; color:#64748b; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }


.jh-right-stream{ min-height:760px; }
.jh-results-viewport{ height:auto !important; overflow:visible !important; border:none !important; padding:0 !important; margin-top:0 !important; }
.jh-list.jh-strip-stream{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.jh-strip-card{ min-height:unset; }
.jh-strip-card .jh-card-head{ align-items:center; }
.jh-strip-card .jh-req-row{ grid-template-columns:1.2fr 1.2fr; }
.jh-strip-card .jh-metrics{ grid-template-columns:repeat(3,minmax(0,220px)); }
/* ===== Jobs Layout V2 (wireframe-like structure, original style language preserved) ===== */
.jobs-shell-layout{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.jobs-hero-strip{ padding:12px; }
.jobs-cta-main-wide{
  width:100%;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.jobs-cta-arrow{
  font-size:34px;
  line-height:1;
  color:rgba(20,45,95,.72);
  font-weight:900;
}
.cjobs-hero-row{
  display:grid;
  grid-template-columns:auto minmax(120px, 220px);
  gap:12px;
  align-items:stretch;
}
.cjobs-post-btn{
  min-height:68px;
  width:min(460px, 100%);
  border:1px solid rgb(141,205,78);
  border-radius:14px;
  background:#fff;
  color:#0f172a;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  cursor:pointer;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.cjobs-post-btn:hover{
  background:rgb(141,205,78);
  border-color:rgb(141,205,78);
}
.cjobs-post-btn-text{
  font-size:24px;
  font-weight:800;
  line-height:1.1;
}
.cjobs-post-btn-arrow{
  font-size:30px;
  line-height:1;
  font-weight:900;
  color:rgba(20,45,95,.72);
}
.cjobs-hero-side-panel{
  min-height:68px;
  border:1px solid rgba(15,23,42,.16);
  border-radius:14px;
  background:#fff;
  width:400px;
  position:relative;
  left:-185px;
}
.jobs-mid-row{
  display:grid;
  grid-template-columns:minmax(240px, 1fr) minmax(0, 2.2fr);
  gap:10px;
}
.jobs-notice-panel,
.jobs-actions-panel{ padding:10px; }
.jobs-notice-list{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:212px;
  overflow-y:auto;
  overflow-x:hidden;

  margin-top:10px;
}
.jobs-note-item{
  width:100%;
  max-width:100%;
  text-align:left;
  border:1px solid rgba(15,23,42,.16);
  border-radius:10px;
  background:#fff;
  color:#0f172a;
  min-height:auto;
  padding:8px 10px;
  font-weight:700;
  cursor:pointer;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  white-space:normal;
  line-height:1.35;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.jobs-note-item:hover{ border-color:rgba(141,205,78,.85); }
.jobs-note-title{
  display:block;
  width:100%;
  line-height:1.35;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.jobs-note-time{
  display:block;
  width:100%;
  font-size:12px;
  line-height:1.2;
  color:#64748b;
  font-weight:600;
}
.jobs-list-panel-compact{ padding:10px; }
.jobs-search-row{ margin-top:10px; }
.jobs-filters-hidden{ display:none !important; }
.jobs-list.jobs-list-stream{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.jobs-list.jobs-list-stream .job-card{
  min-height:0;
  border-radius:12px;
  padding:10px 12px;
}
.jobs-list.jobs-list-stream .job-card-head{
  align-items:center;
}
.jobs-list.jobs-list-stream .job-title-wrap p{
  max-height:none;
}
.jobs-list.jobs-list-stream .job-card-meta{
  grid-template-columns:repeat(3, minmax(0, 220px));
}
@media (max-width: 1200px){
  .jobs-mid-row{ grid-template-columns:minmax(240px, 1fr) minmax(0, 2.2fr); }
}
/* jobs layout adjustments requested */
.jobs-shell-layout{
  padding:12px;
}
.jobs-hero-strip,
.jobs-mid-row,
.jobs-list-panel{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  background:#fff;
  padding:10px;
}
.jobs-notice-panel,
.jobs-actions-panel{
  min-height:240px;
}
.jobs-search-row{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}
.jobs-search-btn{
  min-height:36px;
  border-radius:10px;
  border:1px solid rgba(141,205,78,.85);
  background:#fff;
  color:#0f172a;
  font-weight:800;
  padding:0 14px;
  cursor:pointer;
  box-sizing:border-box;
}
.jobs-search-btn:hover{
  background:rgba(141,205,78,.14);
}

.jobs-notice-list .jobs-empty-row,
.jobs-action-list .jobs-empty-row{
  min-height:118px;
}
/* jobs empty dashed boxes: stick near panel bottom with margin */
.jobs-notice-panel,
.jobs-actions-panel,
.jobs-list-panel-compact{
  display:flex;
  flex-direction:column;
}

.jobs-notice-list,
.jobs-action-list,
.jobs-list.jobs-list-stream{
  flex:1;
  display:flex;
  flex-direction:column;
}

.jobs-notice-list > .jobs-empty-row,
.jobs-action-list > .jobs-empty-row,
.jobs-list.jobs-list-stream > .jobs-empty{
  margin-top:auto;
  margin-bottom:8px;
}

.jobs-notice-list > .jobs-empty-row,
.jobs-action-list > .jobs-empty-row{
  min-height:130px;
}

.jobs-list.jobs-list-stream > .jobs-empty{
  min-height:140px;
}
/* tune: raise top edge while keeping bottom anchored */
.jobs-notice-list > .jobs-empty-row,
.jobs-action-list > .jobs-empty-row{
  min-height:170px;
}
/* extend jobs main panel + list sub-panel by ~200px */
.jobs-shell-layout{
  min-height:900px !important;
}
.jobs-list-panel.jobs-list-panel-compact{
  min-height:420px;
}
/* raise top edge for jobs list empty dashed box while keeping bottom anchored */
.jobs-list.jobs-list-stream > .jobs-empty{
  min-height:320px;
}
/* keep top position but prevent bottom overflow in jobs empty box */
.jobs-list-panel.jobs-list-panel-compact{
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.jobs-list.jobs-list-stream{
  min-height:0;
}
.jobs-list.jobs-list-stream > .jobs-empty{
  min-height:290px;
  max-height:290px;
  box-sizing:border-box;
  overflow:hidden;
}


/* ===== JobHunt Top Panel Rebuild ===== */
.jh-top-rebuild{
  display:flex;
  flex-direction:column;
  gap:12px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  background:#fff;
  padding:12px;
}
.jh-top-search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.jh-top-control-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  border-top:1px solid rgba(15,23,42,.08);
  padding-top:12px;
}
.jh-top-match-block{
  display:grid;
  grid-template-columns:auto minmax(220px,380px) auto auto;
  gap:12px;
  align-items:center;
}
.jh-top-match-label{
  font-size:20px;
  font-weight:800;
  color:#0f172a;
  white-space:nowrap;
}
.jh-top-match-slider{
  width:100%;
  accent-color:rgb(141,205,78);
}
.jh-top-match-value{
  font-size:13px;
  color:#64748b;
  font-weight:700;
  white-space:nowrap;
}
.jh-top-action-block{
  display:flex;
  gap:10px;
  align-items:center;
}
.jh-top-action-btn{
  min-height:46px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.18);
  background:#fff;
  color:#0f172a;
  font-size:16px;
  font-weight:800;
  padding:0 22px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-sizing:border-box;
}
.jh-top-action-btn:hover{
  border-color:rgba(141,205,78,.85);
}


/* JobHunt top interactions */
.jh-search-btn{
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.jh-search-btn:hover{
  background: rgb(141,205,78);
  border-color: rgb(141,205,78);
  color: #0f172a;
}
.jh-top-save-btn{
  min-height:36px;
  border-radius:999px;
  border:1px solid rgba(141,205,78,.85);
  background:#fff;
  color:#0f172a;
  font-size:13px;
  font-weight:800;
  padding:0 12px;
  cursor:pointer;
  box-sizing:border-box;
}
.jh-top-save-btn:hover{
  background:rgba(141,205,78,.16);
}


/* Keep JobHunt top layout fixed across window resize */
.jh-top-rebuild{ min-width: 1180px; }
.jh-top-search-row{ grid-template-columns: minmax(700px,1fr) auto !important; }
.jh-top-control-row{ grid-template-columns: minmax(760px,1fr) auto !important; }
.jh-top-match-block{ grid-template-columns: auto minmax(420px,1fr) auto auto !important; }
.jh-top-action-block{ flex-wrap: nowrap; }


/* JobHunt top skill/software strip */
.jh-top-control-row{
  border-top: none;
  padding-top: 10px;
}
.jh-top-skillline{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  border-top:1px solid rgba(15,23,42,.08);
  border-bottom:1px solid rgba(15,23,42,.08);
  padding:10px 0;
}
.jh-top-skillline-inner{
  position:relative;
  min-width:0;
}
.jh-top-skill-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:2px 48px 2px 0;
}
.jh-top-skill-viewport::-webkit-scrollbar{ display:none; }
.jh-top-skill-track{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  white-space:nowrap;
}
.jh-top-skillline-inner::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:74px;
  height:100%;
  pointer-events:none;
  background:linear-gradient(to left, #fff 20%, rgba(255,255,255,0));
}
.jh-top-chip{
  min-height:30px;
  border-radius:999px;
  border:1px solid var(--chip-theme, rgb(141,205,78));
  background:var(--chip-fill, rgba(141,205,78,.18));
  padding:0 10px 0 8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  box-sizing:border-box;
  user-select:none;
}
.jh-top-chip.is-active{
  background:var(--chip-theme, rgb(141,205,78));
  box-shadow: inset 0 0 0 1px var(--chip-theme, rgb(141,205,78));
}
.jh-top-chip-icon{
  width:20px;
  height:20px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
}
.jh-top-chip-name{
  font-size:12px;
  font-weight:800;
  color:var(--chip-text, rgb(17,24,39));
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.jh-top-reset-btn{
  min-height:34px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.18);
  background:#fff;
  color:#0f172a;
  font-size:13px;
  font-weight:800;
  padding:0 14px;
  cursor:pointer;
  box-sizing:border-box;
}
.jh-top-reset-btn:hover{
  border-color:rgba(141,205,78,.85);
  background:rgba(141,205,78,.14);
}






/* Reusable Order Strip */
.ko-strip{
  border:1px solid rgba(15,23,42,.14);
  border-radius:16px;
  background:#fff;
  padding:12px 14px;
  box-shadow:0 4px 16px rgba(15,23,42,.06);
}
.ko-strip + .ko-strip{ margin-top:10px; }
.ko-strip-top{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.ko-strip-titlewrap{ min-width:0; flex:1; }
.ko-strip-title{ margin:0; font-size:24px; line-height:1.15; color:#0f172a; font-weight:900; }
.ko-strip-summary{ margin:6px 0 0; color:#64748b; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ko-strip-metas{ display:flex; gap:8px; flex-shrink:0; }
.ko-strip-box{ border:1px solid rgba(15,23,42,.25); border-radius:10px; padding:10px 12px; font-size:14px; font-weight:700; color:#0f172a; background:#fff; }
.ko-strip-divider{ margin:10px 0; height:1px; background:rgba(15,23,42,.22); }
.ko-strip-bottom{ display:grid; grid-template-columns:1fr 12px 1fr auto; gap:10px; align-items:center; }
.ko-strip-sep{ width:2px; height:46px; background:rgba(15,23,42,.45); justify-self:center; }
.ko-strip-lane{ display:flex; gap:8px; align-items:center; overflow:hidden; white-space:nowrap; }
.ko-token{ display:inline-flex; align-items:center; gap:8px; border:1px solid; border-radius:999px; padding:4px 12px 4px 8px; max-width:180px; }
.ko-token-icon{ width:22px; height:22px; border-radius:999px; object-fit:cover; border:1px solid rgba(255,255,255,.6); }
.ko-token-name{ font-size:16px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ko-strip-apply{
  border:1px solid rgba(141,205,78,.85);
  background:#fff;
  color:#0f172a;
  border-radius:999px;
  padding:8px 14px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  box-sizing:border-box;
}
.ko-strip-apply:hover{ background:rgba(141,205,78,.12); }
.ko-strip-apply.is-applied{ border-color:rgba(59,130,246,.45); color:#1d4ed8; background:rgba(59,130,246,.10); }

.ko-strip-apply.is-owner{ border-color:rgba(100,116,139,.45); color:#475569; background:rgba(148,163,184,.16); cursor:not-allowed; }

/* JobHunt list without outer panel */
.jh-orders-root{
  display:flex;
  flex-direction:column;
}
.jh-orders-root .jh-list.jh-strip-stream{
  margin-top:0;
}


/* Consumer Jobs embedded strip cards */
.cjobs-list-embedded{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cjobs-list-embedded .cjobs-row{
  width:100%;
  max-width:100%;
}
.cjobs-list-embedded .ko-strip{
  width:100%;
  max-width:100%;
  box-shadow:none;
  border-radius:12px;
  margin:0;
}
.cjobs-list-embedded .ko-strip + .ko-strip{
  margin-top:0;
}


/* Prevent order title/meta overlap */
.ko-strip-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
}
.ko-strip-titlewrap{
  min-width:0;
  padding-right:6px;
}
.ko-strip-title{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.ko-strip-metas{
  flex-wrap:nowrap;
  align-self:start;
}

/* Consumer jobs: one dashed viewport for all rows with right scrollbar */
#cjobsList.cjobs-list-embedded{
  border:1px dashed rgba(15,23,42,.14);
  border-radius:16px;
  padding:10px;
  max-height:520px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
}
#cjobsList.cjobs-list-embedded .cjobs-row + .cjobs-row{
  margin-top:8px;
}
#cjobsList.cjobs-list-embedded .ko-strip{
  width:100%;
}


/* Jobs page: dashed viewport for Notifications & Next Actions */
.jobs-mid-row .jobs-notice-list,
.jobs-mid-row .jobs-action-list{
  margin-top:10px;
  border:1px dashed rgba(15,23,42,.16);
  border-radius:14px;
  padding:8px;
  min-height:200px;
  max-height:200px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  display:flex;
  flex-direction:column;
  gap:8px;
}


/* ConsumerJobs: remove inner dashed boxes inside notification/leave-empty */
#cjobsNotificationsList > .jobs-empty-row,
#cjobsLeaveEmptyList > .jobs-empty-row{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
}


/* Jobs page: order list viewport (scroll inside dashed frame) */
#jobsList.jobs-list.jobs-list-stream{
  border:1px dashed rgba(15,23,42,.16);
  border-radius:16px;
  padding:10px;
  height:360px;
  overflow-y:scroll;
  overflow-x:hidden;
  scrollbar-gutter:stable;
}
#jobsList.jobs-list.jobs-list-stream .job-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:10px;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden;
  box-sizing:border-box;
  flex:0 0 auto;
}
#jobsList.jobs-list.jobs-list-stream .job-card-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:10px;
}
#jobsList.jobs-list.jobs-list-stream .job-title-wrap{
  min-width:0;
}
#jobsList.jobs-list.jobs-list-stream .job-title-wrap h4,
#jobsList.jobs-list.jobs-list-stream .job-title-wrap p{
  overflow-wrap:anywhere;
  word-break:break-word;
}
#jobsList.jobs-list.jobs-list-stream .job-status{
  align-self:start;
  white-space:nowrap;
}
#jobsList.jobs-list.jobs-list-stream .job-card-meta{
  margin-top:0;
  align-items:start;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
#jobsList.jobs-list.jobs-list-stream .job-card-foot{
  position:static !important;
  margin-top:0 !important;
  padding-top:8px;
  border-top:1px solid rgba(15,23,42,.08);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  width:auto !important;
  box-sizing:border-box;
}
#jobsList.jobs-list.jobs-list-stream .job-public-id{
  min-width:0;
  flex:1 1 auto;
  overflow-wrap:anywhere;
  word-break:break-word;
}
#jobsList.jobs-list.jobs-list-stream .job-main-btn{
  flex:0 0 auto;
}

.ko-strip-apply:disabled{ opacity:.55; cursor:not-allowed; }
.ko-strip-apply:disabled:hover{ background:rgba(148,163,184,.16); }

#jobsNotificationsList{
  height:200px !important;
  max-height:200px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-gutter:stable;
}
#jobsNotificationsList .jobs-note-item{
  flex:0 0 auto;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* Unified notification viewports: long lists must scroll vertically */
#jobsNotificationsList.jobs-notice-list,
#nextActionsList.jobs-action-list,
#cjobsNotificationsList.jobs-notice-list,
#cjobsLeaveEmptyList.jobs-action-list{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-gutter:stable;
}

/* Order detail pages (orderbidding / waitconfirm / orderapplied) */
#obNotiList.ob-viewport,
#obNotiList.ob-noti-list{
  max-height:260px !important;
  min-height:140px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-gutter:stable;
}

/* Prevent long notification text from breaking card layout */
.jobs-note-item,
.jobs-action-item,
.ob-note{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Billing pages */
.billing-shell {
  
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.billing-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.billing-head h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
}

.billing-meta {
  color: #64748b;
  font-size: 13px;
}

.billing-viewport {
  /*border: 1px dashed var(--line);*/
  border-radius: 16px;
  padding: 12px;
  height: 610px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height:750px;
}

.billing-list {
  display: grid;
  gap: 10px;
}

.billing-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
}

.billing-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.billing-amount {
  font-size: 22px;
  font-weight: 800;
}

.billing-plus { color: rgb(22, 163, 74); }
.billing-minus { color: rgb(220, 38, 38); }

.billing-time {
  font-size: 12px;
  color: #64748b;
}

.billing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}

.billing-grid p {
  margin: 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.billing-empty {
  border: 1px dashed var(--line);
  border-radius: 12px;
  min-height: 120px;
  display: grid;
  place-items: center;
  color: #64748b;
}
.toplogonexus
{
  background-image: url("./scr/imgs/nexus_strip.png");
  background-size:80%;      
  background-position: center;   /* 居中 */
  background-repeat: no-repeat; 
  height:30px;
  width:200px;
}