/* CyberCafe module — shared UI (contrast-safe) */
.cc-wrap{max-width:1120px;margin:0 auto;color:#0f172a}
.cc-hero{
  display:block;
  background:linear-gradient(135deg,#064e3b 0%,#0d6e3f 45%,#059669 100%);
  color:#ffffff !important;
  border-radius:16px;
  padding:1.35rem 1.5rem;
  margin-bottom:1.15rem;
  position:relative;
  overflow:hidden;
}
.cc-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.cc-hero h1{margin:0;font-size:1.55rem;font-weight:800;letter-spacing:-.02em;color:#ffffff !important}
.cc-hero p{margin:.4rem 0 0;opacity:1;font-size:.92rem;max-width:42rem;color:rgba(255,255,255,.95) !important}
.cc-hero-actions{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem;position:relative;z-index:1}
/* Beat global .btn-primary { color:#fff !important } on white hero CTA */
.cc-hero .btn,
.cc-hero a.btn{
  font-weight:700;
  text-decoration:none !important;
  min-height:2.15rem;
}
.cc-hero .btn-primary,
.cc-hero a.btn-primary{
  background:#ffffff !important;
  color:#064e3b !important;
  border:1.5px solid #ffffff !important;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.cc-hero .btn-primary:hover,
.cc-hero a.btn-primary:hover{
  background:#ecfdf5 !important;
  color:#064e3b !important;
  border-color:#ecfdf5 !important;
}
.cc-hero .btn-outline,
.cc-hero a.btn-outline{
  background:rgba(0,0,0,.18) !important;
  color:#ffffff !important;
  border:1.5px solid rgba(255,255,255,.9) !important;
}
.cc-hero .btn-outline:hover,
.cc-hero a.btn-outline:hover{
  background:rgba(255,255,255,.18) !important;
  color:#ffffff !important;
  border-color:#ffffff !important;
}
.cc-badge{
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:.2rem .5rem;border-radius:999px;
  background:rgba(255,255,255,.2);color:#ffffff !important;
}
.cc-steps{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.55rem;margin-bottom:1.15rem}
.cc-step{background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:.75rem .85rem;display:flex;gap:.65rem;align-items:flex-start;color:#0f172a}
.cc-step-num{width:28px;height:28px;border-radius:50%;background:#ecfdf5;color:#065f46 !important;font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cc-step strong{display:block;font-size:.88rem;color:#0f172a !important}
.cc-step span{font-size:.75rem;color:#64748b !important}
.cc-step.is-done{border-color:#86efac;background:#f0fdf4}
.cc-step.is-active{border-color:#34d399;box-shadow:0 0 0 2px #d1fae5}
.cc-stats{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.65rem;margin-bottom:1.15rem}
.cc-stat{background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:.9rem 1rem;color:#0f172a}
.cc-stat .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#64748b !important;font-weight:600}
.cc-stat .val{font-size:1.35rem;font-weight:800;margin-top:.25rem;color:#0d6e3f !important}
.cc-stat .hint{font-size:.75rem;color:#64748b !important;margin-top:.2rem}
.cc-panel{background:#ffffff;border:1px solid #e2e8f0;border-radius:14px;padding:1.1rem 1.2rem;margin-bottom:1rem;color:#0f172a}
.cc-panel h2{margin:0 0 .65rem;font-size:1.05rem;color:#0f172a !important}
.cc-panel .cc-sub{margin:0 0 .85rem;font-size:.85rem;color:#64748b !important}
.cc-tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.85rem}
.cc-tab{
  border:1px solid #e2e8f0;background:#f8fafc;border-radius:999px;
  padding:.35rem .75rem;font-size:.8rem;font-weight:600;cursor:pointer;color:#1e293b !important;
}
.cc-tab.is-on{background:#0d6e3f !important;border-color:#0d6e3f !important;color:#ffffff !important}
.cc-svc-grid{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.55rem}
.cc-svc{border:1px solid #e2e8f0;border-radius:10px;padding:.7rem .8rem;cursor:pointer;transition:border-color .15s,box-shadow .15s;background:#ffffff;color:#0f172a}
.cc-svc:hover,.cc-svc.is-pick{border-color:#34d399;box-shadow:0 0 0 2px #d1fae5}
.cc-svc strong{display:block;font-size:.85rem;color:#065f46 !important}
.cc-svc span{font-size:.72rem;color:#64748b !important;line-height:1.35}
.cc-form-grid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.65rem}
.cc-form-grid .full{grid-column:1/-1}
.cc-form-grid label{color:#334155 !important;font-weight:600;font-size:.85rem}
.cc-form-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.85rem}
.cc-form-actions .btn-primary{color:#ffffff !important;background:#0d6e3f !important;border-color:#0d6e3f !important}
.cc-form-actions .btn-outline{color:#0d6e3f !important;background:#ffffff !important;border:1.5px solid #0d6e3f !important}
.cc-alert{border-radius:10px;padding:.85rem 1rem;margin-bottom:1rem;font-size:.9rem}
.cc-alert-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a !important}
.cc-alert-ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d !important}
.cc-alert-warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e !important}
.cc-alert-err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b !important}
.cc-table-wrap{overflow-x:auto}
.cc-table{width:100%;border-collapse:collapse;font-size:.85rem;color:#0f172a}
.cc-table th{text-align:left;padding:.5rem .45rem;border-bottom:2px solid #e2e8f0;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:#64748b !important}
.cc-table td{padding:.55rem .45rem;border-bottom:1px solid #e2e8f0;vertical-align:top;color:#0f172a !important}
.cc-table a{color:#0d6e3f !important;font-weight:600}
.cc-chip{display:inline-block;padding:.15rem .45rem;border-radius:6px;font-size:.72rem;font-weight:700}
.cc-chip-green{background:#dcfce7;color:#166534 !important}
.cc-chip-amber{background:#fef3c7;color:#92400e !important}
.cc-chip-red{background:#fee2e2;color:#991b1b !important}
.cc-chip-slate{background:#f1f5f9;color:#334155 !important}
.cc-nav-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}

/* Dark theme: keep CyberCafe readable */
html[data-theme="dark"] .cc-wrap{color:#e2e8f0}
html[data-theme="dark"] .cc-step,
html[data-theme="dark"] .cc-stat,
html[data-theme="dark"] .cc-panel,
html[data-theme="dark"] .cc-svc{
  background:#1e293b !important;
  border-color:#334155 !important;
  color:#e2e8f0 !important;
}
html[data-theme="dark"] .cc-step strong,
html[data-theme="dark"] .cc-panel h2,
html[data-theme="dark"] .cc-table td{color:#f1f5f9 !important}
html[data-theme="dark"] .cc-step span,
html[data-theme="dark"] .cc-stat .lbl,
html[data-theme="dark"] .cc-stat .hint,
html[data-theme="dark"] .cc-panel .cc-sub,
html[data-theme="dark"] .cc-svc span,
html[data-theme="dark"] .cc-table th{color:#94a3b8 !important}
html[data-theme="dark"] .cc-stat .val,
html[data-theme="dark"] .cc-svc strong{color:#6ee7b7 !important}
html[data-theme="dark"] .cc-tab{background:#0f172a;border-color:#475569;color:#e2e8f0 !important}
html[data-theme="dark"] .cc-tab.is-on{background:#059669 !important;border-color:#059669 !important;color:#fff !important}
html[data-theme="dark"] .cc-form-actions .btn-outline{
  background:#1e293b !important;color:#6ee7b7 !important;border-color:#34d399 !important;
}

@media (max-width:640px){
  .cc-hero{padding:1.1rem}
  .cc-hero h1{font-size:1.3rem}
}


/* Pagination */
.pagination, .cc-pager .pagination {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  font-size: .82rem;
}
.pagination a, .pagination span {
  display: inline-block; padding: .3rem .55rem; border-radius: 6px;
  border: 1px solid #e2e8f0; text-decoration: none; color: #334155; background: #fff;
}
.pagination a:hover { border-color: #0d6e3f; color: #0d6e3f; }
.pagination .current { background: #0d6e3f; border-color: #0d6e3f; color: #fff; font-weight: 700; }
.pagination .disabled { opacity: .45; }
.pagination .ellipsis { border: 0; background: transparent; }


/* Selection contrast — avoid whitish washed-out states */
.cc-svc.is-pick,
.cc-svc.is-pick:hover {
  background: #0d6e3f !important;
  border-color: #0d6e3f !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px #a7f3d0;
}
.cc-svc.is-pick .muted,
.cc-svc.is-pick .ht-meta,
.cc-svc.is-pick span { color: rgba(255,255,255,.9) !important; }
.cc-step.is-active {
  background: #ecfdf5 !important;
  border-color: #059669 !important;
  box-shadow: 0 0 0 2px #a7f3d0;
  color: #064e3b !important;
}
.cc-table tr.is-selected,
.cc-table tr.cc-row-selected,
.cc-table tbody tr:focus-within {
  background: #ecfdf5 !important;
}
.cc-table tr.is-selected td,
.cc-table tr.cc-row-selected td {
  color: #064e3b !important;
  font-weight: 600;
}
.cc-job-manage-btn:focus,
.cc-job-manage-btn[aria-expanded="true"] {
  background: #0d6e3f !important;
  color: #fff !important;
  border-color: #0d6e3f !important;
}
/* Select option / filter selected states */
.cc-panel select:focus,
.cc-panel select option:checked {
  background-color: #0d6e3f;
  color: #fff;
}


/* Docs / More dropdown contrast (centre job manage) */
.cc-panel .ksd-menu-panel,
.cc-modal .ksd-menu-panel {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18) !important;
}
.cc-panel .ksd-menu-panel a,
.cc-modal .ksd-menu-panel a {
  color: #0f172a !important;
  font-weight: 600 !important;
}
.cc-panel .ksd-menu-panel a:hover,
.cc-panel .ksd-menu-panel a:focus,
.cc-modal .ksd-menu-panel a:hover,
.cc-modal .ksd-menu-panel a:focus {
  background: #0d6e3f !important;
  color: #ffffff !important;
}
.cc-panel .ksd-menu-open > .ksd-menu-toggle,
.cc-modal .ksd-menu-open > .ksd-menu-toggle {
  background: #0d6e3f !important;
  color: #fff !important;
  border-color: #0d6e3f !important;
}