:root{
  --bg:#07090f;
  --panel:rgba(15,19,30,.72);
  --line:rgba(255,255,255,.08);
  --text:#f5f7fb;
  --muted:#858da0;
  --cyan:#79f2df;
  --violet:#9c8cff;
  --danger:#ff6d88;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:#07090f;
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 0%,rgba(121,242,223,.10),transparent 28%),
    radial-gradient(circle at 82% 8%,rgba(156,140,255,.12),transparent 28%),
    #07090f;
}

.ambient{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.3;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 85%);
}

button,input{font:inherit}

button{
  cursor:pointer;
  color:var(--text);
}

.app{
  position:relative;
  width:min(1460px,calc(100% - 52px));
  margin:auto;
  padding:34px 0 80px;
}

header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}

.brand{
  margin-top:5px;
  font-size:26px;
  font-weight:800;
  letter-spacing:-1px;
}

.brand span{color:var(--cyan)}

.eyebrow{
  color:#788195;
  font-size:10px;
  font-weight:800;
  letter-spacing:2.1px;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.header-actions form{margin:0}

.live-pill,
.ghost{
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  border-radius:999px;
  padding:10px 14px;
  font-size:11px;
  font-weight:700;
}

.live-pill{
  display:flex;
  align-items:center;
  gap:8px;
}

.live-pill i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 18px var(--cyan);
}

.tabs{
  display:flex;
  gap:6px;
  margin:34px 0 18px;
  padding:6px;
  width:max-content;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.tab{
  border:0;
  padding:9px 15px;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font-size:12px;
}

.tab.active{
  color:white;
  background:rgba(255,255,255,.08);
}

.panel{display:none}
.panel.active{display:block}

.hero,
.glass{
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(18,23,36,.82),rgba(10,13,21,.72));
  backdrop-filter:blur(20px);
  box-shadow:0 25px 70px rgba(0,0,0,.22);
}

.hero{
  min-height:190px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:32px;
  border-radius:24px;
}

.health-number{
  margin-top:12px;
  font-size:72px;
  line-height:.9;
  font-weight:800;
  letter-spacing:-5px;
}

.health-number small{
  margin-left:12px;
  color:var(--muted);
  font-size:14px;
  letter-spacing:0;
}

.metrics{
  display:flex;
  gap:10px;
}

.metrics div{
  min-width:110px;
  padding:17px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
}

.metrics span{
  display:block;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:1.3px;
}

.metrics strong{
  display:block;
  margin-top:8px;
  font-size:18px;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:12px;
}

.service-card{
  min-height:135px;
  border:1px solid var(--line);
  border-radius:19px;
  padding:18px;
  background:rgba(14,18,28,.68);
  transition:.2s ease;
}

.service-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.16);
}

.status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#4c5362;
}

.dot.online{
  background:var(--cyan);
  box-shadow:0 0 18px rgba(121,242,223,.75);
}

.status-label{
  color:var(--muted);
  font-size:9px;
  letter-spacing:1.3px;
  font-weight:800;
}

.service-card h3{
  margin:26px 0 5px;
  font-size:14px;
}

.service-card p{
  margin:0;
  color:var(--muted);
  font-size:11px;
}

.split{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:12px;
  margin-top:12px;
}

.glass{
  border-radius:22px;
  padding:25px;
}

.glass h2{
  margin:6px 0 22px;
  font-size:20px;
}

.section-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
}

.action-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.action-grid button,
.log-buttons button{
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,.05);
  padding:10px 13px;
  font-size:11px;
  font-weight:700;
}

.action-grid button:hover,
.log-buttons button:hover,
.ghost:hover{
  background:rgba(255,255,255,.10);
}

.action-grid button.danger{
  color:#ff9aac;
  border-color:rgba(255,109,136,.25);
}

pre{
  margin:20px 0 0;
  min-height:75px;
  max-height:420px;
  overflow:auto;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#080a10;
  color:#aab4c7;
  white-space:pre-wrap;
  word-break:break-word;
  font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
}

.events{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.event{
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  color:#a7afbe;
  font:10px/1.45 ui-monospace,SFMono-Regular,monospace;
}

.topology{min-height:420px}

.flow{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:70px 0;
}

.node{
  min-width:145px;
  text-align:center;
  padding:19px 16px;
  border:1px solid rgba(121,242,223,.18);
  border-radius:17px;
  background:rgba(121,242,223,.035);
}

.node b{font-size:13px}
.node span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:10px;
}

.wire{
  height:1px;
  width:65px;
  background:linear-gradient(90deg,rgba(121,242,223,.1),var(--cyan),rgba(121,242,223,.1));
  box-shadow:0 0 12px rgba(121,242,223,.3);
}

.network-notes,
.kv{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
}

.network-notes div,
.kv div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:12px;
}

.network-notes span,
.kv span{
  color:var(--muted);
  font-size:11px;
}

.network-notes b,
.kv b{
  font-size:11px;
}

.big-status{
  margin:18px 0;
  color:var(--cyan);
  font-size:32px;
  font-weight:800;
  letter-spacing:-1.5px;
}

.recovery-stack{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.recovery-stack div{
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  color:#b9c0cd;
  font-size:12px;
}

.recovery-stack i{
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:10px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);
}

.log-buttons{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.runbook-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.runbook-grid article{
  padding:18px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.02);
}

.runbook-grid h3{
  margin:0 0 14px;
  font-size:13px;
}

.runbook-grid p{
  margin:8px 0;
  color:var(--muted);
  font-size:11px;
}

.runbook-grid b{color:#dfe4ee}

.login-page{
  display:grid;
  place-items:center;
  overflow:hidden;
}

.login-shell{
  width:min(430px,calc(100% - 34px));
  position:relative;
}

.login-card{
  padding:38px;
  border:1px solid var(--line);
  border-radius:27px;
  background:rgba(14,18,28,.78);
  backdrop-filter:blur(22px);
  box-shadow:0 35px 100px rgba(0,0,0,.45);
}

.mark{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  margin-bottom:30px;
  border:1px solid rgba(121,242,223,.28);
  border-radius:16px;
  background:rgba(121,242,223,.06);
  color:var(--cyan);
  font-size:21px;
  font-weight:900;
}

.login-card h1{
  margin:7px 0;
  font-size:34px;
  letter-spacing:-1.7px;
}

.login-card p{
  margin:0 0 29px;
  color:var(--muted);
  font-size:13px;
}

.login-card label{
  display:block;
  margin-bottom:8px;
  color:#7f8798;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.4px;
}

.login-card input{
  width:100%;
  padding:14px;
  outline:0;
  border:1px solid var(--line);
  border-radius:12px;
  background:#090c12;
  color:white;
}

.login-card button{
  width:100%;
  margin-top:10px;
  padding:14px;
  border:0;
  border-radius:12px;
  background:linear-gradient(110deg,#79f2df,#9c8cff);
  color:#07100f;
  font-size:11px;
  font-weight:900;
  letter-spacing:1px;
}

.login-error{
  margin-bottom:15px;
  padding:11px;
  border:1px solid rgba(255,109,136,.25);
  border-radius:11px;
  color:#ff91a4;
  font-size:11px;
}

.secure-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  color:#626a7a;
  font-size:9px;
}

.secure-line span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
}

@media(max-width:980px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .flow{overflow:auto;justify-content:flex-start;padding-bottom:10px}
}

@media(max-width:620px){
  .app{width:min(100% - 24px,1460px);padding-top:20px}
  header{align-items:flex-start;flex-direction:column}
  .tabs{max-width:100%;overflow:auto}
  .hero{align-items:flex-start;flex-direction:column;gap:28px}
  .health-number{font-size:58px}
  .metrics{width:100%;overflow:auto}
  .service-grid{grid-template-columns:1fr}
  .network-notes,.kv,.runbook-grid{grid-template-columns:1fr}
}

/* ===== ULTRA LOW RADIUS ===== */

.login-card,
.mark,
.login-error,
.login-card input,
.login-card button,
.live-pill,
.ghost,
.tabs,
.tab,
.hero,
.glass,
.metrics div,
.service-card,
.action-grid button,
.log-buttons button,
pre,
.node,
.network-notes div,
.kv div,
.recovery-stack div,
.runbook-grid article {
    border-radius: 1px !important;
}

/* Only actual status indicators stay circular */
.dot,
.live-pill i,
.secure-line span,
.recovery-stack i {
    border-radius: 999px !important;
}

/* ===== LOGIN UX V2 ===== */

.login-page {
    min-height: 100vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.login-shell {
    width: min(560px, calc(100vw - 40px)) !important;
}

.login-card {
    width: 100%;
    padding: 48px 46px !important;
    border-radius: 1px !important;
}

.login-card .mark {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 34px !important;
    border-radius: 1px !important;
    font-size: 23px !important;
}

.login-card h1 {
    font-size: 42px !important;
    line-height: 1.05 !important;
    margin: 8px 0 10px !important;
}

.login-card p {
    font-size: 15px !important;
    margin-bottom: 34px !important;
}

.login-card label {
    font-size: 10px !important;
    margin-bottom: 10px !important;
}

.login-card input {
    height: 54px;
    padding: 0 16px !important;
    font-size: 16px !important;
    border-radius: 1px !important;
}

.login-card button {
    height: 52px;
    margin-top: 12px !important;
    font-size: 12px !important;
    border-radius: 1px !important;
}

.login-error {
    padding: 13px 14px !important;
    font-size: 12px !important;
    border-radius: 1px !important;
}

.secure-line {
    margin-top: 22px !important;
    font-size: 10px !important;
}

@media (min-width: 1500px) {
    .login-shell {
        width: 600px !important;
    }

    .login-card {
        padding: 54px 52px !important;
    }
}


/* Recovery action spacing */
#recovery .action-grid {
    margin-top: 18px;
}

/* ===== SMART SERVICE CONTROLS ===== */

.service-card {
    display: flex;
    flex-direction: column;
    min-height: 165px;
}

.service-card.paused {
    opacity: .72;
}

.service-actions {
    display: flex;
    gap: 7px;
    margin-top: auto;
    padding-top: 18px;
}

.service-actions button {
    min-width: 72px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 1px !important;
    background: rgba(255,255,255,.045);
    color: #dfe4ee;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.service-actions button:hover {
    background: rgba(255,255,255,.09);
}

.service-actions .service-stop {
    color: #ff91a4;
    border-color: rgba(255,109,136,.22);
}

/* Keep layout perfectly aligned between tabs */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}


/* Compact system health header */
.hero {
    min-height: 138px !important;
    padding: 22px 32px !important;
    align-items: center !important;
}

.health-number {
    margin-top: 8px !important;
}


.dot.degraded {
    background: #e5bd62 !important;
    box-shadow: 0 0 14px rgba(229,189,98,.55);
}


/* ===== CUSTOM SCROLLBAR ===== */

html {
    scrollbar-width: thin;
    scrollbar-color: #343b48 #0c0f15;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0c0f15;
}

::-webkit-scrollbar-thumb {
    background: #343b48;
    border: 1px solid #0c0f15;
    border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
    background: #61cfc1;
}

::-webkit-scrollbar-corner {
    background: #0c0f15;
}

/* ===== SERVICE CATEGORIES ===== */

#serviceGrid {
    display: block !important;
    margin-top: 12px;
}

.service-section {
    margin-bottom: 14px;
}

.service-section-head {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-bottom: 0;
    background: rgba(255,255,255,.018);
}

.service-section-head > span {
    color: #747d8e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.service-section-desc {
    margin-top: 4px;
    color: #646d7d;
    font-size: 10px;
}

.service-section-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.service-section-grid .service-card {
    margin: 0;
    border: 0;
    background: #11151e;
}

.endpoint-open {
    min-width: 72px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 1px;
    background: rgba(255,255,255,.045);
    color: #dfe4ee;
    text-align: center;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
}

.endpoint-open:hover {
    background: rgba(255,255,255,.09);
}

.managed-note {
    margin-top: auto;
    padding-top: 18px;
    color: #667080;
    font-size: 9px;
    letter-spacing: .5px;
}

.dot.waiting {
    background: #7596b5 !important;
    box-shadow: 0 0 14px rgba(117,150,181,.45);
}

.dot.error {
    background: #ff738d !important;
    box-shadow: 0 0 14px rgba(255,115,141,.45);
}

@media(max-width:980px) {
    .service-section-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:620px) {
    .service-section-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== CLEAN SERVICE LAYOUT V2 ===== */

.service-section {
    margin-bottom: 12px !important;
}

.service-section-head {
    min-height: 42px !important;
    padding: 10px 14px !important;
}

.service-section-desc {
    display: none !important;
}

/* No fake empty fourth slot */
.service-section-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

/* Cards stay inside their own section */
.service-card:hover {
    transform: none !important;
    border-color: transparent !important;
    background: #151a24 !important;
}

.service-card {
    min-height: 145px !important;
    padding: 16px !important;
}

.endpoint-card {
    min-height: 150px !important;
}

.endpoint-action-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
}

.endpoint-service-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.endpoint-service-actions button {
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 1px;
    background: rgba(255,255,255,.045);
    color: #dfe4ee;
    font-size: 10px;
    font-weight: 700;
}

.endpoint-service-actions .service-stop {
    color: #ff91a4;
    border-color: rgba(255,109,136,.25);
}

/* Open always stays on the right */
.endpoint-open {
    margin-left: auto !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 8px 13px !important;

    border: 1px solid rgba(88,154,255,.45) !important;
    border-radius: 1px !important;

    background: #245ea8 !important;
    color: #fff !important;

    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
}

.endpoint-open:hover {
    background: #2d70c8 !important;
}

.endpoint-open svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* Remove unnecessary motion everywhere */
.service-card,
.endpoint-open,
.service-actions button {
    transition: background .12s ease, border-color .12s ease !important;
}


.log-groups {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.log-group {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.log-group:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.log-group > span {
    display: block;
    margin-bottom: 8px;

    color: #687182;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.log-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}


/* ==================================================
   TUNNEL CONTROL - VISUAL POLISH V3
   ================================================== */

/* ----- Better incomplete rows ----- */

.service-section-grid,
.endpoint-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 320px)) !important;
    justify-content: start !important;
    align-items: stretch !important;

    gap: 12px !important;

    padding: 12px !important;

    background: transparent !important;
    border: 1px solid var(--line) !important;
}

.service-section-grid .service-card,
.endpoint-grid .service-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;

    border: 1px solid var(--line) !important;
}

/* ----- Alive hover without going under section header ----- */

.service-card {
    position: relative;
    z-index: 1;

    transform: translateZ(0);
    transform-origin: center;

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease !important;
}

.service-card:hover {
    z-index: 5 !important;

    /* no upward movement = no overlap bug */
    transform: scale(1.008) !important;

    background: #171c26 !important;

    border-color: rgba(105, 240, 222, .35) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.30),
        0 0 0 1px rgba(105,240,222,.08),
        0 0 22px rgba(105,240,222,.08) !important;
}

/* ----- Section neon border ----- */

.service-section,
.hero,
.glass {
    position: relative;
}

.service-section::after,
.hero::after,
.glass::after {
    content: "";
    position: absolute;
    inset: -1px;

    pointer-events: none;
    z-index: 10;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 35%,
            rgba(103,239,222,.0) 42%,
            rgba(103,239,222,.75) 49%,
            rgba(137,124,255,.65) 52%,
            rgba(103,239,222,.0) 59%,
            transparent 66%,
            transparent 100%
        );

    background-size: 240% 100%;

    /* show only border area */
    padding: 1px;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: .27;

    animation: tcNeonTravel 8s linear infinite;
}

@keyframes tcNeonTravel {
    from {
        background-position: 220% 0;
    }

    to {
        background-position: -120% 0;
    }
}

/* slightly brighter while interacting */

.service-section:hover::after,
.hero:hover::after,
.glass:hover::after {
    opacity: .48;
}

/* ----- Status dots stay clean ----- */

.dot {
    position: relative;
    z-index: 2;
}

/* ----- Custom scrollbar ----- */

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;

    scrollbar-width: thin;
    scrollbar-color: #3d6f75 #0a0d13;
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: #0a0d13;
    border-left: 1px solid rgba(255,255,255,.04);
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            rgba(91,220,207,.65),
            rgba(105,111,194,.65)
        );

    border: 2px solid #0a0d13;
    border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            rgba(107,244,226,.85),
            rgba(135,126,235,.82)
        );
}

::-webkit-scrollbar-corner {
    background: #0a0d13;
}

/* ----- Responsive ----- */

@media (max-width: 1350px) {
    .service-section-grid,
    .endpoint-grid {
        grid-template-columns: repeat(auto-fill, minmax(265px, 300px)) !important;
    }
}

@media (max-width: 720px) {
    .service-section-grid,
    .endpoint-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}


/* ==================================================
   NEON ORBIT V4
   One continuous light travelling around each frame
   ================================================== */

@property --tc-orbit {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* Disable the old sweep behavior */
.service-section::after,
.hero::after,
.glass::after {
    transform: none !important;
    background-position: initial !important;

    --tc-orbit: 0deg;

    content: "";
    position: absolute;
    inset: -1px;
    z-index: 10;
    pointer-events: none;

    padding: 1px;

    background:
        conic-gradient(
            from var(--tc-orbit),
            transparent 0deg,
            transparent 305deg,

            rgba(92, 238, 222, .05) 312deg,
            rgba(92, 238, 222, .60) 320deg,
            rgba(103, 247, 229, 1) 329deg,
            rgba(137, 128, 255, 1) 339deg,
            rgba(92, 238, 222, .75) 348deg,

            transparent 357deg,
            transparent 360deg
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: .9;

    filter:
        drop-shadow(0 0 3px rgba(99, 242, 225, .9))
        drop-shadow(0 0 8px rgba(100, 210, 255, .45));

    animation: tcOrbit 4.2s linear infinite !important;
}

@keyframes tcOrbit {
    from {
        --tc-orbit: 0deg;
    }

    to {
        --tc-orbit: 360deg;
    }
}

/* Brighter while the mouse is inside the section */
.service-section:hover::after,
.hero:hover::after,
.glass:hover::after {
    opacity: 1;

    filter:
        drop-shadow(0 0 4px rgba(99, 242, 225, 1))
        drop-shadow(0 0 11px rgba(100, 210, 255, .60))
        drop-shadow(0 0 16px rgba(137, 128, 255, .25));
}

/* Subtle permanent frame so the moving light has a track */
.service-section,
.hero,
.glass {
    border-color: rgba(130, 145, 170, .15) !important;
}


/* =========================================
   VISUAL V4.2
   calm + synced orbit
   ========================================= */

@property --tc-orbit-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* سکشن های بزرگ: فقط فریم ثابت */
.service-section,
.hero,
.glass,
.panel,
.section-box,
.diagnostics,
.watchdog,
.logs-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.service-section::before,
.hero::before,
.glass::before,
.panel::before,
.section-box::before,
.diagnostics::before,
.watchdog::before,
.logs-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(110, 130, 155, 0.16);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.015),
        0 0 0 1px rgba(55,70,90,0.08);
}

/* هر افکت متحرک قدیمی روی سکشن های بزرگ خاموش */
.service-section::after,
.hero::after,
.glass::after,
.panel::after,
.section-box::after,
.diagnostics::after,
.watchdog::after,
.logs-panel::after {
    animation: none !important;
    background: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* کارت ها: نور چرخان */
.service-card,
.status-card,
.metric-card,
.subdomain-card,
.log-card,
.action-card,
.service-tile {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.service-card:hover,
.status-card:hover,
.metric-card:hover,
.subdomain-card:hover,
.log-card:hover,
.action-card:hover,
.service-tile:hover {
    transform: translateY(-3px);
    z-index: 3;
    box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}

.service-card::after,
.status-card::after,
.metric-card::after,
.subdomain-card::after,
.log-card::after,
.action-card::after,
.service-tile::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    z-index: 2;
    pointer-events: none;

    background: conic-gradient(
        from var(--tc-orbit-angle),
        transparent 0deg 328deg,
        rgba(98, 242, 229, 0.00) 328deg,
        rgba(98, 242, 229, 0.35) 336deg,
        rgba(98, 242, 229, 0.95) 344deg,
        rgba(145, 128, 255, 0.95) 351deg,
        rgba(98, 242, 229, 0.38) 357deg,
        transparent 360deg
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0.82;
    filter:
        drop-shadow(0 0 5px rgba(98, 242, 229, 0.55))
        drop-shadow(0 0 10px rgba(145, 128, 255, 0.20));

    animation: tcOrbitStable 7.6s linear infinite !important;
}

/* hover فقط روشن تر شود، نه سریع تر */
.service-card:hover::after,
.status-card:hover::after,
.metric-card:hover::after,
.subdomain-card:hover::after,
.log-card:hover::after,
.action-card:hover::after,
.service-tile:hover::after {
    opacity: 0.96;
}

/* جلوگیری از hover باگ‌دار */
.cards-grid,
.services-grid,
.section-grid,
.subdomains-grid,
.dashboard-grid {
    gap: 16px !important;
    overflow: visible !important;
}

@keyframes tcOrbitStable {
    from { --tc-orbit-angle: 0deg; }
    to   { --tc-orbit-angle: 360deg; }
}


/* ==================================================
   COMPACT NETWORK-STYLE LOGS
   ================================================== */

#logs .logs-shell {
    padding: 22px !important;
}

.logs-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logs-top h2 {
    margin: 5px 0 0 !important;
}

.logs-stream {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #7c8798;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.logs-stream i,
.console-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #69efdf;
    box-shadow: 0 0 10px rgba(105,239,223,.8);
}

.log-flow {
    display: grid;
    grid-template-columns:
        minmax(220px,1fr)
        32px
        minmax(180px,.85fr)
        32px
        minmax(160px,.72fr)
        32px
        minmax(190px,.82fr);

    align-items: center;
    margin-top: 22px;
}

.log-node {
    min-height: 92px;
    padding: 13px;

    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.018);
}

.log-node-title {
    margin-bottom: 11px;

    color: #727d8f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.log-node .log-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.log-node .log-buttons button {
    padding: 7px 9px;
    border-radius: 1px !important;

    font-size: 9px;
}

.log-node .log-buttons button.active {
    color: #8ef7ea;
    border-color: rgba(105,239,223,.42);
    background: rgba(105,239,223,.08);
}

.log-wire {
    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(105,239,223,.08),
        rgba(105,239,223,.55),
        rgba(105,239,223,.08)
    );

    box-shadow: 0 0 7px rgba(105,239,223,.18);
}

.log-console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 20px;
    padding: 9px 11px;

    border: 1px solid rgba(255,255,255,.08);
    border-bottom: 0;

    background: #0d1016;
}

.log-console-head > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.log-console-head strong {
    font-size: 10px;
    font-weight: 700;
    color: #aeb7c6;
}

#logRefreshBtn {
    padding: 6px 9px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 1px;

    background: rgba(255,255,255,.035);
    color: #9ba5b5;

    font-size: 9px;
    font-weight: 700;
}

.log-console {
    margin: 0 !important;

    min-height: 330px !important;
    max-height: 480px !important;

    border-radius: 0 !important;
}

/* old animated pseudo borders OFF */
.service-section::after,
.hero::after,
.glass::after {
    content: none !important;
    animation: none !important;
    background: none !important;
}

/* ==================================================
   TRUE SINGLE-LIGHT ORBIT
   SVG handles movement; speed stays constant
   ================================================== */

.tc-orbit-svg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 20;
    pointer-events: none;
    overflow: visible;
}

.tc-orbit-base {
    fill: none;
    stroke: rgba(102,130,155,.14);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.tc-orbit-light {
    fill: none;

    stroke: #72f6e6;
    stroke-width: 1.35;

    stroke-linecap: round;
    vector-effect: non-scaling-stroke;

    filter:
        drop-shadow(0 0 2px rgba(114,246,230,1))
        drop-shadow(0 0 5px rgba(114,246,230,.85))
        drop-shadow(0 0 9px rgba(126,143,255,.45));
}

@media(max-width:1050px) {
    .log-flow {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .log-node {
        flex: 0 0 220px;
    }

    .log-wire {
        flex: 0 0 25px;
    }
}


/* ==================================================
   LOG FLOW V2 - NETWORK FLOW STYLE
   ================================================== */

.log-flow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100%;
    margin: 26px auto 0 !important;

    gap: 0 !important;
}

.log-node {
    flex: 0 0 220px !important;

    min-width: 220px !important;
    min-height: 96px !important;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 14px !important;

    text-align: center;

    border: 1px solid rgba(111, 142, 163, .25) !important;
    background: rgba(18, 24, 33, .78) !important;
}

.log-node-title {
    margin-bottom: 11px !important;

    text-align: center !important;

    color: #788596 !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
}

.log-node .log-buttons {
    justify-content: center !important;
}

.log-wire {
    flex: 0 0 52px !important;

    width: 52px !important;
    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            rgba(105,239,223,.08),
            rgba(105,239,223,.75),
            rgba(105,239,223,.08)
        ) !important;

    box-shadow:
        0 0 5px rgba(105,239,223,.28),
        0 0 11px rgba(105,239,223,.10) !important;
}

/* slightly cleaner console spacing */

.log-console-head {
    margin-top: 24px !important;
}

@media(max-width:1150px) {

    .log-flow {
        justify-content: flex-start !important;
        overflow-x: auto !important;

        padding:
            4px
            max(12px, calc((100vw - 900px) / 2))
            10px !important;
    }

    .log-node {
        flex: 0 0 205px !important;
        min-width: 205px !important;
    }

    .log-wire {
        flex: 0 0 38px !important;
        width: 38px !important;
    }
}


/* ==================================================
   NEON ORBIT V5 - SINGLE GLOBAL CLOCK
   ================================================== */

/*
   Completely disable every older section glow.
   Only SVG orbit is allowed to render.
*/

.service-section::before,
.service-section::after,
.hero::before,
.hero::after,
.glass::before,
.glass::after,
.endpoint-section::before,
.endpoint-section::after {
    content: none !important;

    animation: none !important;

    background: none !important;

    box-shadow: none !important;
    filter: none !important;

    opacity: 0 !important;
}


/* Every tracked section gets exactly the same base border */

.service-section,
.hero,
#network .glass,
#recovery .glass,
#logs .glass,
#runbook .glass {
    position: relative !important;

    isolation: isolate;

    border: 1px solid rgba(83, 102, 126, .24) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.012) !important;
}


/* SVG itself */

.tc-orbit-svg {
    position: absolute !important;

    inset: -1px !important;

    width: calc(100% + 2px) !important;
    height: calc(100% + 2px) !important;

    z-index: 50 !important;

    overflow: visible !important;

    pointer-events: none !important;
}

.tc-orbit-base {
    fill: none;

    stroke: rgba(80, 105, 128, .20) !important;
    stroke-width: 1 !important;

    vector-effect: non-scaling-stroke;
}

.tc-orbit-light {
    fill: none;

    stroke-width: 1.8 !important;
    stroke-linecap: round !important;

    vector-effect: non-scaling-stroke;

    opacity: 1 !important;

    filter:
        drop-shadow(0 0 2px rgba(104, 255, 235, 1))
        drop-shadow(0 0 5px rgba(104, 255, 235, .95))
        drop-shadow(0 0 10px rgba(94, 221, 255, .65))
        drop-shadow(0 0 16px rgba(146, 124, 255, .35)) !important;
}


/* hover stays alive, but orbit speed never changes */

.service-section:hover .tc-orbit-light,
.hero:hover .tc-orbit-light,
#network .glass:hover .tc-orbit-light,
#recovery .glass:hover .tc-orbit-light,
#logs .glass:hover .tc-orbit-light,
#runbook .glass:hover .tc-orbit-light {
    stroke-width: 2.05 !important;

    filter:
        drop-shadow(0 0 3px rgba(104,255,235,1))
        drop-shadow(0 0 7px rgba(104,255,235,1))
        drop-shadow(0 0 13px rgba(94,221,255,.78))
        drop-shadow(0 0 20px rgba(146,124,255,.45)) !important;
}


/* ==================================================
   SOFT BORDER PULSE V6
   Lightweight: only opacity changes
   ================================================== */

/* Kill every old moving neon */
.tc-orbit-svg {
    display: none !important;
}

.service-section::before,
.service-section::after,
.hero::before,
.hero::after,
#network .glass::before,
#network .glass::after,
#recovery .glass::before,
#recovery .glass::after,
#logs .glass::before,
#logs .glass::after,
#runbook .glass::before,
#runbook .glass::after {
    animation: none !important;
    background: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Shared frame */
.service-section,
.hero,
#network .glass,
#recovery .glass,
#logs .glass,
#runbook .glass {
    position: relative !important;
    isolation: isolate;

    border: 1px solid rgba(86, 113, 132, .25) !important;
}

/* One soft breathing border */
.service-section::after,
.hero::after,
#network .glass::after,
#recovery .glass::after,
#logs .glass::after,
#runbook .glass::after {
    content: "" !important;

    position: absolute;
    inset: -1px;

    pointer-events: none;
    z-index: 20;

    border: 1px solid rgba(103, 242, 224, .52);

    box-shadow:
        0 0 6px rgba(103, 242, 224, .22),
        inset 0 0 5px rgba(103, 242, 224, .06);

    opacity: .30 !important;

    animation: tcSoftPulse 4.8s ease-in-out infinite !important;
}

@keyframes tcSoftPulse {
    0%, 100% {
        opacity: .22;
    }

    50% {
        opacity: .72;
    }
}

/* Hover: brighter only, no extra movement */
.service-section:hover::after,
.hero:hover::after,
#network .glass:hover::after,
#recovery .glass:hover::after,
#logs .glass:hover::after,
#runbook .glass:hover::after {
    opacity: .88 !important;
}


/* ==================================================
   TC_BACKUP_SECURITY_CSS_V1
   ================================================== */

#backups .glass,
#security .glass {
    position: relative !important;
    isolation: isolate;
    border: 1px solid rgba(86, 113, 132, .25) !important;
}

#backups .glass::after,
#security .glass::after {
    content: "" !important;
    position: absolute;
    inset: -1px;
    pointer-events: none;
    z-index: 20;
    border: 1px solid rgba(103, 242, 224, .52);
    box-shadow:
        0 0 6px rgba(103, 242, 224, .22),
        inset 0 0 5px rgba(103, 242, 224, .06);
    opacity: .30 !important;
    animation: tcSoftPulse 4.8s ease-in-out infinite !important;
}

#backups .glass:hover::after,
#security .glass:hover::after {
    opacity: .88 !important;
}

.tc-control-section {
    padding: 24px;
}

.tc-section-title {
    gap: 18px;
    align-items: flex-start;
}

.tc-section-title h2 {
    margin: 4px 0 6px;
}

.tc-section-title p {
    margin: 0;
    max-width: 760px;
    opacity: .72;
    line-height: 1.55;
}

.tc-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.tc-summary-strip > span {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(110, 137, 157, .20);
    background: rgba(255,255,255,.018);
}

.tc-summary-strip b {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    letter-spacing: .11em;
    text-transform: uppercase;
    opacity: .55;
}

.tc-management-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.tc-manage-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(107, 133, 154, .20);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.024),
            rgba(255,255,255,.010)
        );
}

.tc-manage-card.featured {
    border-color: rgba(103, 242, 224, .32);
    box-shadow: inset 0 0 22px rgba(103,242,224,.025);
}

.tc-manage-card h3 {
    margin: 12px 0 6px;
}

.tc-manage-card > p {
    min-height: 40px;
    margin: 0 0 16px;
    opacity: .66;
    line-height: 1.45;
}

.tc-card-top {
    min-height: 25px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.tc-state,
.tc-covered,
.tc-legacy {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid rgba(130,150,170,.22);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

.tc-state.good {
    color: var(--cyan);
    border-color: rgba(103,242,224,.35);
}

.tc-state.warn,
.tc-legacy {
    color: #ffc56e;
    border-color: rgba(255,197,110,.35);
}

.tc-state.danger {
    color: var(--danger);
    border-color: rgba(255,90,110,.35);
}

.tc-state.muted {
    opacity: .6;
}

.tc-covered {
    color: rgba(205,220,235,.72);
}

.tc-meta {
    display: grid;
    gap: 7px;
    margin: 0 0 16px;
}

.tc-meta > div {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.tc-meta dt {
    opacity: .48;
    font-size: 11px;
}

.tc-meta dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 12px;
}

.tc-meta .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.tc-card-actions,
.tc-modal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tc-card-actions button,
.tc-manage-card > button {
    margin-top: 2px;
}

.tc-loading,
.tc-error-box {
    grid-column: 1 / -1;
    padding: 18px;
    border: 1px solid rgba(110,137,157,.20);
    opacity: .7;
}

.tc-error-box {
    color: var(--danger);
}

.tc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(4, 8, 14, .78);
    backdrop-filter: blur(10px);
}

.tc-modal {
    width: min(520px, 100%);
    max-height: min(760px, 92vh);
    overflow: auto;
    padding: 20px;
    border: 1px solid rgba(103,242,224,.30);
    background: #0a1018;
    box-shadow:
        0 22px 80px rgba(0,0,0,.62),
        0 0 30px rgba(103,242,224,.06);
}

.tc-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.tc-modal-head h3 {
    margin: 5px 0 0;
}

.tc-modal-close {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    font-size: 22px;
}

.tc-field {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}

.tc-field > span {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .62;
}

.tc-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid rgba(116,142,164,.28);
    outline: none;
    background: rgba(255,255,255,.025);
    color: inherit;
}

.tc-field input:focus {
    border-color: rgba(103,242,224,.62);
    box-shadow: 0 0 0 2px rgba(103,242,224,.07);
}

.tc-form-hint,
.tc-warning-box {
    margin: 3px 0 16px;
    padding: 10px 12px;
    border-left: 2px solid rgba(103,242,224,.38);
    background: rgba(103,242,224,.035);
    font-size: 12px;
    line-height: 1.55;
    opacity: .76;
}

.tc-warning-box {
    border-left-color: rgba(255,184,85,.60);
    background: rgba(255,184,85,.04);
}

.tc-form-status {
    min-height: 20px;
    margin-top: 12px;
    font-size: 12px;
    color: #ffc56e;
}

.tc-notice {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 12000;
    max-width: min(430px, calc(100vw - 36px));
    padding: 12px 15px;
    border: 1px solid rgba(103,242,224,.40);
    background: #0b131b;
    box-shadow: 0 12px 35px rgba(0,0,0,.42);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.tc-notice.show {
    opacity: 1;
    transform: translateY(0);
}

.tc-notice.danger {
    border-color: rgba(255,90,110,.55);
    color: #ff9bab;
}

@media (max-width: 1050px) {
    .tc-management-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .tc-management-grid,
    .tc-summary-strip {
        grid-template-columns: 1fr;
    }

    .tc-control-section {
        padding: 16px;
    }

    .tc-meta > div {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .tc-modal-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* ==================================================
   TC MANAGEMENT UI POLISH V2
   Backups + Security
   ================================================== */

#backups,
#security {
    --tc-card-bg: rgba(15, 24, 37, .72);
    --tc-card-bg-hover: rgba(18, 30, 45, .92);
    --tc-line: rgba(119, 151, 177, .20);
    --tc-line-hover: rgba(103, 242, 224, .40);
    --tc-text-muted: rgba(201, 215, 229, .57);
    --tc-cyan-soft: rgba(103, 242, 224, .075);
}

/* Main shell */

#backups .tc-control-section,
#security .tc-control-section {
    padding: 26px !important;
    border-radius: 3px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(82, 149, 255, .045),
            transparent 34%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(103, 242, 224, .032),
            transparent 30%
        ),
        rgba(12, 20, 31, .68);
}

/* Header */

#backups .tc-section-title,
#security .tc-section-title {
    margin-bottom: 22px;
}

#backups .tc-section-title h2,
#security .tc-section-title h2 {
    margin: 5px 0 7px !important;
    font-size: 21px;
    letter-spacing: -.02em;
}

#backups .tc-section-title p,
#security .tc-section-title p {
    color: var(--tc-text-muted);
    line-height: 1.6;
}

/* Summary */

#backups .tc-summary-strip,
#security .tc-summary-strip {
    gap: 12px !important;
    margin: 0 0 18px !important;
}

#backups .tc-summary-strip > span,
#security .tc-summary-strip > span {
    position: relative;
    overflow: hidden;

    padding: 14px 15px !important;

    border:
        1px solid
        rgba(116, 145, 170, .18) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.027),
            rgba(255,255,255,.010)
        ) !important;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease !important;
}

#backups .tc-summary-strip > span:hover,
#security .tc-summary-strip > span:hover {
    transform: translateY(-2px);

    border-color:
        rgba(103, 242, 224, .30) !important;

    background:
        rgba(103, 242, 224, .035) !important;
}

#backups .tc-summary-strip b,
#security .tc-summary-strip b {
    color: rgba(179, 198, 216, .58);
}

/* Grid */

#backups .tc-management-grid,
#security .tc-management-grid {
    gap: 15px !important;
}

/* Cards */

#backups .tc-manage-card,
#security .tc-manage-card {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    min-height: 300px;
    padding: 20px !important;

    border:
        1px solid
        var(--tc-line) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.026),
            transparent 47%
        ),
        var(--tc-card-bg) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.015),
        0 6px 20px rgba(0,0,0,.08);

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease !important;
}

#backups .tc-manage-card::before,
#security .tc-manage-card::before {
    content: "";
    position: absolute;

    width: 160px;
    height: 160px;

    right: -75px;
    top: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(103,242,224,.08),
            transparent 68%
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .18s ease,
        transform .28s ease;
}

#backups .tc-manage-card:hover,
#security .tc-manage-card:hover {
    transform: translateY(-4px);

    border-color:
        var(--tc-line-hover) !important;

    background:
        linear-gradient(
            145deg,
            rgba(103,242,224,.040),
            transparent 48%
        ),
        var(--tc-card-bg-hover) !important;

    box-shadow:
        0 14px 34px rgba(0,0,0,.24),
        0 0 20px rgba(103,242,224,.025);
}

#backups .tc-manage-card:hover::before,
#security .tc-manage-card:hover::before {
    opacity: 1;
    transform: scale(1.14);
}

/* Featured cards */

#backups .tc-manage-card.featured,
#security .tc-manage-card.featured {
    border-color:
        rgba(103, 242, 224, .34) !important;

    box-shadow:
        inset 0 0 26px rgba(103,242,224,.024),
        0 6px 20px rgba(0,0,0,.10);
}

#backups .tc-manage-card.featured:hover,
#security .tc-manage-card.featured:hover {
    border-color:
        rgba(103, 242, 224, .58) !important;
}

/* Titles */

#backups .tc-manage-card h3,
#security .tc-manage-card h3 {
    margin: 13px 0 7px !important;

    color: rgba(244, 249, 255, .96);

    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.015em;
}

#backups .tc-manage-card > p,
#security .tc-manage-card > p {
    min-height: 48px !important;
    margin: 0 0 17px !important;

    color: var(--tc-text-muted);
    line-height: 1.55;
}

/* Status chips */

#backups .tc-state,
#security .tc-state,
#backups .tc-covered,
#security .tc-covered,
#backups .tc-legacy,
#security .tc-legacy {
    border-radius: 4px;

    padding: 4px 8px !important;

    background:
        rgba(255,255,255,.018);

    font-size: 9px !important;
    line-height: 1;
}

#backups .tc-state.good,
#security .tc-state.good {
    color: #7ff7e9 !important;

    background:
        rgba(103,242,224,.055);

    border-color:
        rgba(103,242,224,.35) !important;
}

#backups .tc-state.warn,
#security .tc-state.warn,
#security .tc-legacy {
    color: #ffd27a !important;

    background:
        rgba(255,194,82,.055);

    border-color:
        rgba(255,194,82,.35) !important;
}

#backups .tc-state.danger,
#security .tc-state.danger {
    color: #ff90a3 !important;

    background:
        rgba(255,90,110,.055);
}

/* Metadata */

#backups .tc-meta,
#security .tc-meta {
    margin-top: auto !important;
    margin-bottom: 17px !important;

    padding-top: 3px;

    gap: 0 !important;
}

#backups .tc-meta > div,
#security .tc-meta > div {
    grid-template-columns:
        92px
        minmax(0,1fr) !important;

    min-height: 30px;

    padding: 6px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.035);
}

#backups .tc-meta > div:last-child,
#security .tc-meta > div:last-child {
    border-bottom: 0;
}

#backups .tc-meta dt,
#security .tc-meta dt {
    color: rgba(164,184,204,.47);

    font-size: 10px !important;
}

#backups .tc-meta dd,
#security .tc-meta dd {
    color: rgba(231,240,248,.86);

    font-size: 11px !important;
}

/* ==================================================
   BUTTON RESET
   This intentionally overrides old browser/button CSS
   ================================================== */

#backups button,
#security button,
.tc-modal button {
    -webkit-appearance: none !important;
    appearance: none !important;

    position: relative;

    min-height: 36px !important;

    padding: 8px 13px !important;

    border:
        1px solid
        rgba(116, 148, 174, .26) !important;

    border-radius: 3px !important;

    background:
        rgba(255,255,255,.025) !important;

    color:
        rgba(225,236,246,.88) !important;

    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .015em;

    cursor: pointer !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.008);

    opacity: 1 !important;

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease !important;
}

#backups button:hover:not(:disabled),
#security button:hover:not(:disabled),
.tc-modal button:hover:not(:disabled) {
    transform: translateY(-2px) !important;

    background:
        rgba(103,242,224,.080) !important;

    border-color:
        rgba(103,242,224,.46) !important;

    color:
        #f7ffff !important;

    box-shadow:
        0 8px 18px rgba(0,0,0,.20),
        0 0 14px rgba(103,242,224,.045) !important;
}

#backups button:active:not(:disabled),
#security button:active:not(:disabled),
.tc-modal button:active:not(:disabled) {
    transform: translateY(0) !important;
}

/* Main action */

#backups [data-backup-export] {
    align-self: flex-start;

    min-width: 130px;

    border-color:
        rgba(103,242,224,.34) !important;

    background:
        linear-gradient(
            180deg,
            rgba(103,242,224,.12),
            rgba(103,242,224,.055)
        ) !important;

    color:
        #aafff5 !important;
}

#backups [data-backup-export]:hover {
    background:
        linear-gradient(
            180deg,
            rgba(103,242,224,.20),
            rgba(103,242,224,.085)
        ) !important;

    color:
        #ffffff !important;
}

/* Danger */

#security button.danger,
.tc-modal button.danger {
    border-color:
        rgba(255,95,119,.30) !important;

    background:
        rgba(255,95,119,.045) !important;

    color:
        #ff9dad !important;
}

#security button.danger:hover,
.tc-modal button.danger:hover {
    border-color:
        rgba(255,95,119,.52) !important;

    background:
        rgba(255,95,119,.10) !important;

    color:
        #ffd8de !important;
}

/* Disabled button: fixes white bug */

#backups button:disabled,
#security button:disabled,
.tc-modal button:disabled {
    -webkit-appearance: none !important;
    appearance: none !important;

    background:
        rgba(255,255,255,.018) !important;

    border-color:
        rgba(126,145,163,.10) !important;

    color:
        rgba(174,190,205,.30) !important;

    box-shadow:
        none !important;

    opacity: 1 !important;

    cursor: not-allowed !important;

    filter: none !important;

    transform: none !important;
}

#backups button:disabled:hover,
#security button:disabled:hover,
.tc-modal button:disabled:hover {
    background:
        rgba(255,255,255,.018) !important;

    border-color:
        rgba(126,145,163,.10) !important;

    color:
        rgba(174,190,205,.30) !important;

    box-shadow:
        none !important;

    transform: none !important;
}

/* Card buttons layout */

#backups .tc-card-actions,
#security .tc-card-actions {
    gap: 8px !important;
}

#security .tc-card-actions button {
    flex: 0 1 auto;
}

/* ==================================================
   MODAL
   ================================================== */

.tc-modal-overlay {
    background:
        rgba(4, 8, 14, .84) !important;

    backdrop-filter:
        blur(12px) saturate(.9) !important;
}

.tc-modal {
    border-radius: 5px !important;

    border:
        1px solid
        rgba(103,242,224,.32) !important;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(103,242,224,.045),
            transparent 33%
        ),
        #0b121c !important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.68),
        0 0 34px rgba(103,242,224,.035) !important;
}

.tc-field input {
    -webkit-appearance: none;
    appearance: none;

    border-radius: 3px !important;

    background:
        rgba(255,255,255,.025) !important;

    color:
        rgba(240,247,253,.95) !important;
}

.tc-field input:hover {
    border-color:
        rgba(119,151,177,.40) !important;
}

.tc-field input:focus {
    border-color:
        rgba(103,242,224,.55) !important;

    box-shadow:
        0 0 0 3px rgba(103,242,224,.055) !important;
}

/* ==================================================
   TABS POLISH
   ================================================== */

.tabs .tab {
    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease !important;
}

.tabs .tab:hover {
    color:
        rgba(230,244,248,.90) !important;

    background:
        rgba(103,242,224,.035) !important;

    border-color:
        rgba(103,242,224,.18) !important;
}

.tabs .tab.active {
    color:
        rgba(245,255,253,.98) !important;

    background:
        rgba(103,242,224,.075) !important;

    border-color:
        rgba(103,242,224,.24) !important;
}

/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 1100px) {
    #backups .tc-management-grid,
    #security .tc-management-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
    }

    #backups .tc-summary-strip,
    #security .tc-summary-strip {
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
    }
}

@media (max-width: 680px) {
    #backups .tc-control-section,
    #security .tc-control-section {
        padding: 16px !important;
    }

    #backups .tc-management-grid,
    #security .tc-management-grid,
    #backups .tc-summary-strip,
    #security .tc-summary-strip {
        grid-template-columns: 1fr !important;
    }

    #backups .tc-manage-card,
    #security .tc-manage-card {
        min-height: auto;
    }

    #backups .tc-meta > div,
    #security .tc-meta > div {
        grid-template-columns:
            82px
            minmax(0,1fr) !important;
    }
}


/* TB_VERIFY_UI_CSS_V1 */

.tbv-card {
    margin-top: 22px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );
    box-shadow:
        0 16px 45px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.035);
    transition:
        border-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}

.tbv-card:hover {
    border-color: rgba(255,255,255,.16);
    box-shadow:
        0 20px 55px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.tbv-head,
.tbv-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.tbv-head h3,
.tbv-result-head h3 {
    margin: 5px 0 8px;
}

.tbv-head p {
    margin: 0;
    max-width: 660px;
    opacity: .72;
    line-height: 1.65;
}

.tbv-safe-badge,
.tbv-verified {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid rgba(102,255,191,.24);
    border-radius: 999px;
    background: rgba(60,220,150,.08);
    color: #9ff0c8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.tbv-form {
    margin-top: 22px;
}

.tbv-file-zone {
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px dashed rgba(255,255,255,.14);
    border-radius: 16px;
    background: rgba(0,0,0,.13);
    cursor: pointer;
    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.tbv-file-zone:hover {
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.035);
    transform: translateY(-1px);
}

.tbv-file-zone input {
    display: none;
}

.tbv-file-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border-radius: 13px;
    background: rgba(255,255,255,.07);
    font-size: 22px;
}

.tbv-file-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tbv-file-copy strong,
.tbv-file-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbv-file-copy small {
    opacity: .58;
}

.tbv-password-row {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        auto
        auto;
    align-items: end;
    gap: 12px;
    margin-top: 14px;
}

.tbv-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tbv-field > span {
    font-size: 12px;
    opacity: .68;
}

.tbv-field input {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    outline: none;
    background: rgba(0,0,0,.22);
    color: inherit;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.tbv-field input:focus {
    border-color: rgba(120,180,255,.5);
    box-shadow: 0 0 0 3px rgba(90,150,255,.08);
}

.tbv-primary,
.tbv-cancel {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 750;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        opacity .18s ease;
}

.tbv-primary {
    border: 1px solid rgba(120,180,255,.35);
    background: rgba(80,135,230,.16);
    color: inherit;
}

.tbv-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(80,135,230,.24);
    border-color: rgba(130,190,255,.55);
}

.tbv-cancel {
    border: 1px solid rgba(255,130,130,.25);
    background: rgba(220,70,70,.09);
    color: inherit;
}

.tbv-cancel:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(220,70,70,.15);
}

.tbv-primary:disabled,
.tbv-cancel:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.tbv-progress-wrap {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    background: rgba(0,0,0,.13);
}

.tbv-progress-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    font-size: 12px;
}

.tbv-progress-top span {
    opacity: .7;
}

.tbv-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.065);
}

.tbv-progress i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            rgba(90,150,255,.85),
            rgba(90,230,190,.9)
        );
    transition: width .2s ease;
}

.tbv-status {
    margin-top: 15px;
    padding: 13px 15px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
}

.tbv-status-success {
    border: 1px solid rgba(80,230,160,.18);
    background: rgba(50,190,125,.08);
}

.tbv-status-error {
    border: 1px solid rgba(255,100,100,.2);
    background: rgba(220,65,65,.08);
}

.tbv-status-info {
    border: 1px solid rgba(120,180,255,.18);
    background: rgba(70,130,220,.08);
}

.tbv-result {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.tbv-check-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.tbv-check {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 13px;
    background: rgba(0,0,0,.12);
}

.tbv-check span,
.tbv-check strong {
    display: block;
}

.tbv-check span {
    margin-bottom: 7px;
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .52;
}

.tbv-check strong {
    overflow-wrap: anywhere;
    font-size: 13px;
    line-height: 1.45;
}

.tbv-check-good {
    border-color: rgba(80,230,160,.14);
    background: rgba(50,190,125,.045);
}

.tbv-details {
    margin-top: 14px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    background: rgba(0,0,0,.12);
}

.tbv-details summary {
    padding: 13px 15px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    font-weight: 700;
}

.tbv-details pre {
    max-height: 360px;
    overflow: auto;
    margin: 0;
    padding: 15px;
    border-top: 1px solid rgba(255,255,255,.06);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 11px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .tbv-check-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .tbv-card {
        padding: 18px;
    }

    .tbv-head,
    .tbv-result-head {
        flex-direction: column;
    }

    .tbv-password-row {
        grid-template-columns: 1fr;
    }

    .tbv-check-grid {
        grid-template-columns: 1fr;
    }

    .tbv-primary,
    .tbv-cancel {
        width: 100%;
    }
}

/* TC_EGRESS_SVG_FLAGS_V1 */
.tc-egress-flag {
    width: 30px;
    height: 21px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tc-egress-flag img {
    display: block;
    width: 30px;
    height: 20px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.12),
        0 2px 6px rgba(0,0,0,.28);
}