/* EvolutionVIP Toolbox — design system */

:root{
  --bg:#F1F0EC;
  --bg-home:#ECEBE7;
  --ink:#211E2B;
  --ink-deep:#191722;
  --muted:#6E6B76;
  --muted-2:#8B8895;
  --light:#A8A5B3;
  --pale:#D8D6E0;
  --green:#21D397;
  --green-d:#0FA97C;
  --green-dd:#0B8763;
  --green-ink:#0B3B2C;
  --cyan:#17EAD9;
  --pink:#C21F6E;
  --pink-d:#8F1650;
  --amber:#B45309;
  --card:#fff;
  --line:rgba(0,0,0,.07);
  --line-2:rgba(0,0,0,.1);
  --grad:linear-gradient(135deg,#21D397,#17EAD9);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* author display rules beat the UA [hidden] rule — the search filters rely on this */
[hidden]{display:none !important;}
body{
  background:var(--bg);
  font-family:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--green-d);text-decoration:none;}
a:hover{color:var(--green-dd);}
h1,h2,h3{margin:0;}
input,textarea,select,button{font-family:inherit;}
:focus-visible{outline:2px solid var(--green);outline-offset:1px;}

.tb-page{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);}

/* ---------- header ---------- */
.tb-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 28px;background:var(--ink);
}
.tb-brand{display:flex;align-items:center;gap:14px;}
.tb-brand img{height:22px;display:block;}
.tb-brand-sep{width:1px;height:18px;background:rgba(255,255,255,.18);}
.tb-brand-tag{font:700 12px var(--mono);letter-spacing:.22em;color:var(--green);}
.tb-header-right{display:flex;align-items:center;gap:18px;}
.tb-header-link{color:var(--green);font-weight:500;font-size:13px;white-space:nowrap;}
.tb-langsw{display:flex;border:1px solid rgba(255,255,255,.2);border-radius:7px;overflow:hidden;}
.tb-langsw a{
  padding:5px 12px;font-size:12.5px;font-weight:600;
  color:var(--light);background:transparent;
}
.tb-langsw a.is-active{background:var(--green);color:var(--green-ink);}
.tb-langsw a:not(.is-active):hover{background:rgba(255,255,255,.07);color:#fff;}

/* ---------- hero ---------- */
.tb-hero{position:relative;background:var(--ink-deep);padding:48px 32px;overflow:hidden;}
.tb-hero::before,.tb-hero::after{
  content:'';position:absolute;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.tb-hero::before{top:-70px;inset-inline-end:-50px;width:260px;height:230px;background:rgba(33,211,151,.07);}
.tb-hero::after{bottom:-90px;inset-inline-end:190px;width:200px;height:180px;background:rgba(23,234,217,.05);}
.tb-hero-in{position:relative;max-width:1080px;margin:0 auto;}
.tb-hero-in > div{max-width:660px;}
.tb-hero h1{margin:0 0 12px;font-size:40px;line-height:1.14;font-weight:800;color:#fff;}
.tb-hero h1 em{
  font-style:normal;
  background:linear-gradient(90deg,#21D397,#17EAD9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tb-hero p{margin:0 0 20px;font-size:16px;line-height:1.6;color:var(--light);}
.tb-chips{display:flex;gap:8px;flex-wrap:wrap;}
.tb-chip{
  padding:6px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.22);
  color:var(--pale);font-size:12.5px;
}
.tb-chip:hover{border-color:var(--green);color:var(--green);}

/* ---------- home layout ---------- */
.tb-home{flex:1;background:var(--bg-home);padding:30px 32px 48px;}
.tb-home-in{max-width:1080px;margin:0 auto;display:flex;align-items:flex-start;gap:24px;}
.tb-home-side{width:250px;flex:none;display:flex;flex-direction:column;gap:16px;}
.tb-home-main{flex:1;min-width:0;}

.tb-search{
  display:flex;align-items:center;gap:9px;background:var(--card);
  border:1px solid var(--line-2);border-radius:8px;padding:2px 13px;
}
.tb-search svg{flex:none;color:var(--muted-2);}
.tb-search input{
  flex:1;min-width:0;border:none;background:transparent;padding:9px 0;
  font-size:13.5px;color:var(--ink);outline:none;
}

.tb-cats{background:var(--card);border-radius:10px;border:1px solid var(--line);overflow:hidden;}
.tb-cat{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;font-size:13.5px;color:var(--ink);
  border-inline-start:3px solid transparent;
}
.tb-cat:hover{background:#F7F6F3;color:var(--ink);}
.tb-cat.is-active{background:#F7F6F3;border-inline-start-color:var(--green);}
.tb-cat.is-active .tb-cat-label{font-weight:600;color:var(--green-d);}
.tb-cat-n{font-size:11.5px;color:var(--muted-2);}

/* ---------- promo ---------- */
.tb-promo{background:var(--ink);border-radius:10px;padding:18px;position:relative;overflow:hidden;}
.tb-promo::before{
  content:'';position:absolute;top:-30px;inset-inline-end:-26px;width:100px;height:90px;
  background:rgba(33,211,151,.12);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.tb-promo-sm{padding:16px;}
.tb-promo-sm::before{display:none;}
.tb-promo-title{position:relative;font-size:15px;font-weight:700;color:#fff;line-height:1.35;margin-bottom:6px;}
.tb-promo-sm .tb-promo-title{font-size:14px;margin-bottom:4px;}
.tb-promo-desc{position:relative;font-size:12.5px;color:var(--light);line-height:1.5;margin-bottom:12px;}
.tb-promo-sm .tb-promo-desc{margin-bottom:10px;}
.tb-promo-cta{
  position:relative;display:inline-block;padding:8px 16px;border-radius:6px;
  background:var(--pink);color:#fff;font-weight:600;font-size:12.5px;
}
.tb-promo-cta:hover{background:#A81A5F;color:#fff;}
.tb-promo-cta.is-grad{background:var(--grad);color:var(--green-ink);font-weight:700;padding:7px 14px;}
.tb-promo-cta.is-grad:hover{color:var(--green-ink);opacity:.9;}

/* ---------- tool cards ---------- */
.tb-mainhead{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;}
.tb-mainhead h2{font-size:22px;font-weight:700;color:var(--ink);}
.tb-mainhead span{font-size:13px;color:var(--muted-2);}

.tb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.tb-card{
  background:var(--card);border-radius:12px;padding:18px;border:1px solid rgba(0,0,0,.06);
  display:flex;flex-direction:column;gap:10px;color:var(--ink);
  transition:box-shadow .15s,border-color .15s,transform .15s;
}
.tb-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.1);border-color:var(--green);color:var(--ink);transform:translateY(-1px);}
.tb-card-top{display:flex;align-items:center;justify-content:space-between;}
.tb-badge{
  font:500 10px var(--mono);letter-spacing:.08em;padding:3px 8px;border-radius:99px;
  background:var(--bg-home);color:var(--muted);
}
.tb-card-name{display:flex;align-items:center;gap:8px;}
.tb-card-name > span:not(.tb-star){font-size:15px;font-weight:600;color:var(--ink);}
.tb-card-desc{font-size:12.5px;line-height:1.5;color:var(--muted);flex:1;}
.tb-card-cta{font-size:12.5px;font-weight:600;color:var(--green-d);}
.tb-dot{width:6px;height:6px;border-radius:50%;background:var(--pink);flex:none;}

/* favourite star — grey when not a favourite, purple on hover, stays purple when starred */
.tb-star{
  border:0;background:none;padding:2px;margin:0;cursor:pointer;flex:none;
  font-size:15px;line-height:1;color:#DCDAE2;   /* very light grey, unobtrusive */
  transition:color .15s,transform .1s;
}
.tb-star:hover{color:var(--pink);transform:scale(1.2);}   /* purple on hover */
.tb-star.is-fav{color:var(--pink);}                        /* purple, persisted */
.tb-star.is-fav:hover{color:var(--pink-d);}
.tb-card-name .tb-star{margin-inline-start:auto;}

.tb-icon{
  width:38px;height:38px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font:700 10px var(--mono);
}
.tb-icon.is-grad{background:var(--grad);color:var(--green-ink);}
.tb-icon.is-dark{background:var(--ink);color:var(--green);}
.tb-icon-sm{width:26px;height:26px;border-radius:6px;font-size:8px;}
.tb-icon svg{width:20px;height:20px;display:block;}
.tb-icon-sm svg{width:15px;height:15px;}

.tb-empty{
  background:var(--card);border:1px dashed rgba(0,0,0,.15);border-radius:10px;
  padding:34px;text-align:center;font-size:14px;color:var(--muted-2);
}

/* ---------- tool page ---------- */
.tb-toolpage{
  flex:1;display:flex;align-items:flex-start;gap:24px;
  padding:28px 32px 36px;max-width:1080px;margin:0 auto;width:100%;
}
.tb-toolmain{flex:1;min-width:0;order:1;}
.tb-toolside{width:280px;flex:none;display:flex;flex-direction:column;gap:14px;order:2;}

.tb-crumbs{font-size:12px;color:var(--muted-2);margin-bottom:10px;display:flex;gap:6px;flex-wrap:wrap;}
.tb-crumbs a{color:var(--muted-2);}
.tb-crumbs a:hover{color:var(--green-d);}
.tb-crumbs b{color:var(--ink);font-weight:600;}
.tb-toolhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px;}
.tb-toolhead h1{font-size:26px;font-weight:800;color:var(--ink);}
.tb-sidebadge{
  font:500 10px var(--mono);letter-spacing:.06em;padding:4px 9px;border-radius:99px;
  background:rgba(33,211,151,.13);color:var(--green-dd);white-space:nowrap;
}
.tb-sidebadge.is-server{background:rgba(33,30,43,.07);color:var(--muted);}
.tb-tooldesc{margin:0 0 18px;font-size:13.5px;color:var(--muted);}

/* ---------- sidebar on tool page ---------- */
.tb-sidepanel{overflow:hidden;}
.tb-sidepanel-head{padding:14px 14px 10px;}
.tb-sidepanel-title{font:500 10.5px var(--mono);letter-spacing:.12em;color:var(--muted-2);margin-bottom:10px;}
.tb-sidesearch{
  width:100%;background:var(--bg);border:1px solid rgba(0,0,0,.08);border-radius:7px;
  padding:8px 12px;font-size:13px;color:var(--ink);
}
.tb-sidelist{max-height:340px;overflow-y:auto;padding-bottom:6px;}
.tb-sideitem{
  display:flex;align-items:center;gap:10px;padding:8px 14px;color:var(--ink);
  border-inline-start:3px solid transparent;
}
.tb-sideitem:hover{background:#F7F6F3;color:var(--ink);}
.tb-sideitem.is-active{background:#F7F6F3;border-inline-start-color:var(--green);}
.tb-sideitem.is-active .tb-sideitem-name{font-weight:700;color:var(--green-d);}
.tb-sideitem-name{
  flex:1;min-width:0;font-size:13px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-side-empty{padding:14px;font-size:12.5px;color:var(--muted-2);text-align:center;}

/* ---------- forms ---------- */
.tb-form{display:flex;flex-direction:column;gap:12px;margin-bottom:18px;}
.tb-fields{display:flex;gap:10px;flex-wrap:wrap;}
.tb-fields > .tb-field{flex:1;min-width:180px;}
.tb-field{display:flex;flex-direction:column;gap:5px;}
.tb-label{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:12px;font-weight:500;color:var(--muted);
}
.tb-label .tb-opt{color:var(--muted-2);font-weight:400;}
.tb-filelink{cursor:pointer;color:var(--green-d);font-weight:600;}
.tb-filelink:hover{color:var(--green-dd);}
.tb-input,.tb-textarea,.tb-select{
  width:100%;background:var(--card);border:1px solid var(--line-2);border-radius:8px;
  padding:11px 14px;color:var(--ink);font:500 14px var(--mono);
}
.tb-textarea{padding:12px 14px;font:500 13px/1.7 var(--mono);resize:vertical;min-height:110px;}
.tb-select{font:500 13.5px 'Rubik',sans-serif;cursor:pointer;}
.tb-input::placeholder,.tb-textarea::placeholder{color:#B9B7C0;font-family:'Rubik',sans-serif;}
.tb-input:focus,.tb-textarea:focus,.tb-select:focus{outline:2px solid var(--green);outline-offset:-1px;}
.tb-row-inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.tb-row-inline > .tb-field{flex:1;min-width:200px;}

.tb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 24px;border-radius:8px;border:none;cursor:pointer;
  background:var(--ink);color:var(--green);font-weight:700;font-size:14px;
  white-space:nowrap;
}
.tb-btn:hover{background:var(--ink-deep);color:var(--green);}
.tb-btn[disabled]{opacity:.6;cursor:default;}
.tb-btn-ghost{
  background:transparent;border:1px solid var(--line-2);color:var(--muted);
  font-weight:600;font-size:13px;padding:9px 16px;
}
.tb-btn-ghost:hover{background:#fff;color:var(--ink);border-color:var(--muted-2);}
.tb-btn-sm{padding:6px 12px;font-size:12px;font-weight:600;border-radius:6px;}
.tb-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

.tb-checks{display:flex;flex-wrap:wrap;gap:8px;}
.tb-check{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:6px 12px;border-radius:99px;border:1px solid var(--line-2);
  background:var(--card);font:500 12px var(--mono);color:var(--muted);
}
.tb-check:hover{border-color:var(--green);}
.tb-check input{accent-color:var(--green-d);margin:0;}
.tb-check:has(input:checked){border-color:var(--green);background:rgba(33,211,151,.09);color:var(--green-dd);}
.tb-hint{font-size:12px;color:var(--muted-2);line-height:1.6;}
.tb-hint code{font-family:var(--mono);font-size:11.5px;background:rgba(0,0,0,.05);padding:1px 5px;border-radius:4px;}

/* ---------- result panel ---------- */
.tb-panel{background:var(--card);border:1px solid rgba(0,0,0,.08);border-radius:10px;overflow:hidden;}
.tb-result{margin-bottom:18px;}
.tb-result:empty{display:none;}

.tb-loading{
  display:flex;align-items:center;gap:12px;padding:22px;
  background:var(--card);border:1px solid rgba(0,0,0,.08);border-radius:10px;
}
.tb-spin{
  width:16px;height:16px;border-radius:50%;flex:none;
  border:3px solid rgba(33,211,151,.3);border-top-color:var(--green-d);
  animation:tbSpin 1s linear infinite;
}
.tb-loading span{font:500 13px var(--mono);color:var(--muted);}
@keyframes tbSpin{to{transform:rotate(360deg);}}

.tb-banner{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:rgba(33,211,151,.1);
}
.tb-banner i{
  width:22px;height:22px;border-radius:50%;flex:none;font-style:normal;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;background:var(--green-d);
}
.tb-banner b{font-size:14.5px;font-weight:600;color:#0B6B4F;}
.tb-banner.is-err,.tb-banner.is-warn{background:rgba(194,31,110,.08);}
.tb-banner.is-err i,.tb-banner.is-warn i{background:var(--pink);}
.tb-banner.is-err b,.tb-banner.is-warn b{color:var(--pink-d);}
.tb-banner.is-amber{background:rgba(245,158,11,.12);}
.tb-banner.is-amber i{background:var(--amber);}
.tb-banner.is-amber b{color:#92400E;}

.tb-kv{display:flex;padding:11px 18px;border-bottom:1px solid rgba(0,0,0,.05);font-size:13.5px;gap:10px;}
.tb-kv:last-child{border-bottom:none;}
.tb-kv-k{width:170px;flex:none;color:var(--muted-2);}
.tb-kv-v{color:var(--ink);font-weight:500;min-width:0;word-break:break-word;}
.tb-kv-v.is-mono{font-family:var(--mono);font-size:12.5px;}
.tb-kv-v.is-ok{color:var(--green-d);}
.tb-kv-v.is-bad{color:var(--pink);}
.tb-kv-v.is-muted{color:var(--muted-2);}

.tb-tablewrap{overflow-x:auto;}
.tb-table{width:100%;border-collapse:collapse;}
.tb-table th{
  padding:10px 18px;text-align:start;background:#FAFAF8;
  font:500 10.5px var(--mono);letter-spacing:.1em;color:var(--muted-2);text-transform:uppercase;
  border-bottom:1px solid rgba(0,0,0,.08);white-space:nowrap;
}
.tb-table td{
  padding:10px 18px;font:500 12.5px var(--mono);color:var(--ink);
  border-bottom:1px solid rgba(0,0,0,.05);vertical-align:top;
}
.tb-table td.is-ok{color:var(--green-d);}
.tb-table td.is-bad{color:var(--pink);}
.tb-table td.is-muted{color:var(--muted-2);}
.tb-table tr:last-child td{border-bottom:none;}

.tb-chain{padding:14px 18px;border-bottom:1px solid rgba(0,0,0,.05);}
.tb-chain-title{
  font:500 10.5px var(--mono);letter-spacing:.1em;color:var(--muted-2);
  text-transform:uppercase;margin-bottom:10px;
}
.tb-chain-lines{display:flex;flex-direction:column;gap:8px;}
.tb-chain-lines div{
  display:flex;align-items:center;gap:10px;
  font:500 12.5px var(--mono);color:var(--ink);
}
.tb-chain-lines i{color:var(--green-d);font-weight:700;font-style:normal;}

.tb-out{padding:16px 18px;background:var(--ink-deep);}
.tb-out-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;
}
.tb-out-title{font:500 10.5px var(--mono);letter-spacing:.1em;color:var(--muted-2);text-transform:uppercase;}
.tb-out pre{
  margin:0;font:400 12.5px/1.8 var(--mono);color:var(--pale);
  white-space:pre-wrap;word-break:break-all;max-height:420px;overflow:auto;
}
.tb-out .tb-btn-sm{background:rgba(255,255,255,.1);color:var(--green);border:none;}
.tb-out .tb-btn-sm:hover{background:rgba(255,255,255,.18);}
.tb-files{display:flex;gap:10px;flex-wrap:wrap;padding:14px 18px;}

/* ---------- html sandbox ---------- */
.tb-sandbox{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  height:560px;margin-bottom:18px;
}
/* Fullscreen turns the two panes into a resizable split: pane | splitter | pane. */
.tb-sandbox.is-full{
  position:fixed;inset:0;z-index:60;height:auto;margin:0;
  padding:14px;background:var(--bg-home);
  gap:0;
  grid-template-columns:var(--sh-split,50%) 14px 1fr;
  grid-template-rows:1fr;
}
.tb-sandbox.is-full.is-vertical{
  grid-template-columns:1fr;
  grid-template-rows:var(--sh-split,50%) 14px 1fr;
}

/* the drag handle — only exists in fullscreen */
.tb-split{display:none;position:relative;touch-action:none;}
.tb-sandbox.is-full .tb-split{display:block;cursor:col-resize;}
.tb-sandbox.is-full.is-vertical .tb-split{cursor:row-resize;}
.tb-split::after{
  content:'';position:absolute;inset:0;margin:auto;
  border-radius:99px;background:rgba(0,0,0,.16);
}
.tb-sandbox.is-full .tb-split::after{width:4px;height:46px;}
.tb-sandbox.is-full.is-vertical .tb-split::after{width:46px;height:4px;}
.tb-split:hover::after{background:var(--green-d);}
/* while dragging, the iframe must not swallow the pointer */
.tb-sandbox.is-dragging{user-select:none;}
.tb-sandbox.is-dragging .tb-split::after{background:var(--green-d);}
.tb-sandbox.is-dragging iframe{pointer-events:none;}

/* controls that only make sense in fullscreen */
.tb-fullonly{display:none;}
.tb-sandbox.is-full .tb-fullonly{display:inline-flex;}
.tb-pane{display:flex;flex-direction:column;min-width:0;min-height:0;}
.tb-pane-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:7px;flex-wrap:wrap;
}
.tb-pane-title{font:500 10.5px var(--mono);letter-spacing:.12em;color:var(--muted-2);text-transform:uppercase;}
.tb-pane-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.tb-pane-actions .tb-check{padding:4px 9px;font-size:11px;}
.tb-pane-actions .tb-btn{padding:5px 11px;font-size:11.5px;font-weight:600;border-radius:6px;}
.tb-pane-body{
  flex:1;min-height:0;background:var(--card);
  border:1px solid var(--line-2);border-radius:8px;overflow:hidden;
}
.tb-pane-body iframe{width:100%;height:100%;border:0;display:block;background:#fff;}
textarea.tb-code{
  width:100%;height:100%;border:none;resize:none;outline:none;
  padding:12px 14px;background:transparent;color:var(--ink);
  font:500 13px/1.7 var(--mono);tab-size:2;
}
/* CodeMirror, when the CDN is reachable — otherwise the textarea above is used as-is */
.tb-pane-body .CodeMirror{
  height:100%;font-family:var(--mono);font-size:13px;line-height:1.7;
}
.tb-pane-body .CodeMirror-gutters{background:#FAFAF8;border-inline-end:1px solid var(--line);}
.tb-pane-body .CodeMirror-linenumber{color:#B9B7C0;}

@media (max-width:900px){
  .tb-sandbox{grid-template-columns:1fr;height:auto;}
  .tb-pane-body{height:320px;}
  /* on a phone a side-by-side split is useless — fullscreen always stacks */
  .tb-sandbox.is-full{
    grid-template-columns:1fr;
    grid-template-rows:var(--sh-split,50%) 14px 1fr;
  }
  .tb-sandbox.is-full .tb-split{cursor:row-resize;}
  .tb-sandbox.is-full .tb-split::after{width:46px;height:4px;}
  .tb-sandbox.is-full .tb-pane-body{height:auto;}
}

/* ---------- character checker ---------- */
.tb-cc-out{
  background:var(--bg-home);border:1px solid var(--line);border-radius:8px;
  padding:16px 18px;min-height:96px;
  font:500 16px/1.9 var(--mono);letter-spacing:.04em;color:var(--ink);
  white-space:pre-wrap;word-break:break-all;
}
.tb-cc-out:empty::before{
  content:attr(data-empty);color:var(--muted-2);
  font:400 13.5px 'Rubik',sans-serif;letter-spacing:normal;
}
/* No background here on purpose: this selector outranks .cc-l / .cc-i / … and
   would wipe out the colour that is the entire point of the tool. */
.tb-cc-out mark{
  padding:1px 2px;border-radius:4px;color:var(--ink);font-weight:700;
}
.cc-l{background:#FDE68A;}
.cc-i{background:#A5F3FC;}
.cc-1{background:#DDD6FE;}
.cc-o{background:#FBCFE8;}
.cc-0{background:#BBF7D0;}
.cc-inv{background:#FCA5A5;color:#7F1D1D;}
.cc-uni{background:#FDBA74;color:#7C2D12;outline:1px dashed #C2410C;}

.tb-cc-key{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:8px 14px;margin-top:14px;
}
.tb-cc-key div{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);}
.tb-cc-key mark{
  flex:none;width:22px;height:22px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font:700 13px var(--mono);color:var(--ink);
}
.tb-cc-key b{color:var(--ink);font-weight:600;}
.tb-cc-count{margin-inline-start:auto;font:500 11px var(--mono);color:var(--muted-2);}

/* ---------- let's encrypt wizard ---------- */
.tb-steps{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.tb-step{
  display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;
  background:var(--card);border:1px solid var(--line);font-size:13px;color:var(--muted-2);
}
.tb-step b{
  width:20px;height:20px;border-radius:50%;flex:none;background:var(--bg-home);
  display:flex;align-items:center;justify-content:center;font:700 11px var(--mono);color:var(--muted-2);
}
.tb-step.is-active{border-color:var(--green);color:var(--ink);}
.tb-step.is-active b{background:var(--green);color:var(--green-ink);}
.tb-step.is-done b{background:var(--green-d);color:#fff;}

.tb-instr{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;margin-bottom:12px;
}
.tb-instr-h{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.tb-instr-h b{font-size:14.5px;color:var(--ink);}
.tb-instr-h .tb-badge{margin-inline-start:auto;}
.tb-instr-label{font:500 11px var(--mono);letter-spacing:.06em;color:var(--muted-2);text-transform:uppercase;margin:10px 0 5px;}
.tb-instr-val{
  display:flex;align-items:flex-start;gap:8px;background:var(--ink-deep);border-radius:7px;
  padding:10px 12px;
}
.tb-instr-val pre{
  margin:0;flex:1;min-width:0;font:500 12.5px/1.6 var(--mono);color:var(--pale);
  white-space:pre-wrap;word-break:break-all;
}
.tb-instr-val .tb-btn-sm{flex:none;background:rgba(255,255,255,.1);color:var(--green);border:none;}
.tb-instr-val .tb-btn-sm:hover{background:rgba(255,255,255,.18);}

.tb-status{
  display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;
  border:1px solid var(--line);background:var(--card);margin-bottom:8px;font-size:13.5px;
}
.tb-status i{width:9px;height:9px;border-radius:50%;flex:none;font-style:normal;}
.tb-status .st-pending{background:var(--amber);}
.tb-status .st-valid{background:var(--green-d);}
.tb-status .st-invalid{background:var(--pink);}
.tb-status .st-name{font-family:var(--mono);color:var(--ink);}
.tb-status .st-msg{margin-inline-start:auto;font-size:12px;color:var(--muted-2);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .tb-home-in,.tb-toolpage{flex-direction:column;}
  .tb-home-side,.tb-toolside{width:100%;}
  .tb-toolside{order:3;}
  .tb-grid{grid-template-columns:repeat(2,1fr);}
  .tb-hero{padding:36px 20px;}
  .tb-hero h1{font-size:30px;}
}
@media (max-width:620px){
  .tb-grid{grid-template-columns:1fr;}
  .tb-header{padding:10px 16px;gap:10px;}
  .tb-header-link{display:none;}
  .tb-home,.tb-toolpage{padding-left:16px;padding-right:16px;}
  .tb-kv{flex-direction:column;gap:2px;}
  .tb-kv-k{width:auto;}
  .tb-footer{flex-direction:column;gap:10px;text-align:center;}
}

/* ---------- footer ---------- */
.tb-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;background:var(--ink-deep);margin-top:auto;
}
.tb-footer img{height:16px;display:block;opacity:.85;}
.tb-footer-links{display:flex;gap:20px;font-size:12.5px;color:var(--muted-2);align-items:center;}
.tb-footer-links a{color:var(--muted-2);}
.tb-footer-links a:hover{color:var(--green);}