:root{
  --ttc-g1:#19A153;
  --ttc-g2:#5BB250;
  --ttc-g3:#8FC049;
  --ttc-g4:#BED13D;

  --bg:#0b1220;
  --panel: rgba(15,27,51,.78);
  --line: rgba(32,52,85,.7);
  --text:#e6eefc;
  --muted:#9bb0d1;

  --shadow: 0 12px 30px rgba(0,0,0,.35);

  --accent: var(--ttc-g1);
  --accent2: var(--ttc-g4);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* page background */
.ttc-body{
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(25,161,83,.25), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(190,209,61,.12), transparent 55%),
    radial-gradient(1000px 800px at 60% 120%, rgba(91,178,80,.12), transparent 60%),
    var(--bg);
  color: var(--text);
}

.ttc-body{
  position: relative;
  min-height: 100vh;
}

.ttc-body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .06; /* 0.04–0.10 подбирай */
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.ttc-header{
  background: linear-gradient(180deg, rgba(15,27,51,.86), rgba(12,23,46,.86));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.ttc-panel{
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow);
  color: var(--text);
}

.ttc-muted{ color: var(--muted) !important; }
.ttc-mono{ font-family: var(--mono); }

/* Pretty pre */
.ttc-pre{
  background: rgba(11,18,32,.65);
  border: 1px solid rgba(32,52,85,.85);
  border-radius: 14px;
  padding: 12px;
  color: #dbe7ff;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  overflow: auto;
  max-height: 520px;
}

/* KV list */
.ttc-kvlist{ display:grid; gap:8px; }
.ttc-kvrow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(32,52,85,.75);
  background: rgba(12,23,46,.35);
}
.ttc-kvrow span{ color: var(--muted); font-size: 13px; }
.ttc-kvrow b{ font-family: var(--mono); font-weight: 800; font-size: 13px; }

/* TTC button */
.btn-ttc{
  --bs-btn-bg: var(--ttc-g2);
  --bs-btn-border-color: var(--ttc-g2);
  --bs-btn-hover-bg: var(--ttc-g1);
  --bs-btn-hover-border-color: var(--ttc-g1);
  --bs-btn-color: #06101c;
  --bs-btn-hover-color: #06101c;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

.card.ttc-panel{
  border-radius: 18px;
}

.card-header{
  background: linear-gradient(
    180deg,
    rgba(15,27,51,.9),
    rgba(12,23,46,.9)
  );
}

.btn-outline-light.active{
  background: rgba(255,255,255,.15);
  color: #fff;
}

/* ---------------------------------
   Forms: input/select/textarea
   --------------------------------- */

/* базовый цвет текста/рамки */
.form-control,
.form-select,
.form-control:disabled,
.form-select:disabled{
  color: var(--text);
  background-color: rgba(12,23,46,.55);
  border: 1px solid rgba(32,52,85,.85);
}

/* плейсхолдер */
.form-control::placeholder{
  color: rgba(155,176,209,.75);
}

/* hover */
.form-control:hover,
.form-select:hover{
  border-color: rgba(143,192,73,.35);
}

/* focus */
.form-control:focus,
.form-select:focus{
  color: var(--text);
  background-color: rgba(12,23,46,.70);
  border-color: rgba(143,192,73,.55);
  box-shadow: 0 0 0 4px rgba(25,161,83,.12);
}

/* select стрелочка (Bootstrap uses background-image) */
.form-select{
  background-color: rgba(12,23,46,.55);
  border: 1px solid rgba(32,52,85,.85);
}

/* чтобы автозаполнение (Chrome) не делало жёлтый/белый */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0px 1000px rgba(12,23,46,.70) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* маленькая косметика: плавные углы */
.form-control,
.form-select{
  border-radius: 12px;
}

.select-tab {
background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: 1px solid #ffffff;
  color: #000000;
  border-radius: 12px;
  font-weight: bold;
}

/* Footer */
.ttc-footer {
  padding: 14px 0 18px;
  margin-top: 8px;
  color: rgba(185, 200, 220, 0.75);
  font-size: 12px;
}

.ttc-footer-brand {
  font-weight: 500;
}

.ttc-footer-meta {
  margin-left: 6px;
  opacity: .65;
}

.ttc-footer-link {
  color: rgba(185, 200, 220, 0.85);
  text-decoration: none;
}

.ttc-footer-link:hover {
  color: #8fd16a; /* TTC green */
}

@media (max-width: 575px) {
  .ttc-footer {
    text-align: center;
    line-height: 1.6;
  }

  .ttc-footer-meta {
    display: block;
    margin-left: 0;
  }
}