:root{
 --brand:#e30613;
 --bg:#0b0b0c;
 --card:#121214;
 --text:#ffffff;
 --muted:rgba(255,255,255,.65);
 --border:rgba(255,255,255,.12);
 --r:16px;
 --shadow:0 10px 30px rgba(0,0,0,.35);
 font-family: Inter, system-ui, Arial, sans-serif;
}
*{box-sizing:border-box}
body{
 margin:0;
 background:var(--bg);
 color:var(--text);
}
.container{
 width:min(1200px,92%);
 margin:auto;
}
.topbar{
 background:#000;
 border-bottom:1px solid var(--border);
 position:sticky;
 top:0;
 z-index:20;
}
.topbar__in{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:14px 0;
}
.brand{
 display:flex;
 gap:10px;
 align-items:center;
 font-weight:800;
 letter-spacing:.5px;
 text-decoration:none;
 color:#fff;
}
.brand__dot{
 width:10px;
 height:10px;
 background:var(--brand);
 border-radius:50%;
}
.nav{
 display:flex;
 gap:16px;
 font-weight:600;
}
.nav a{
 color:var(--muted);
 text-decoration:none;
}
.nav a.isActive{
 color:#fff;
}
.main{
 padding:40px 0;
}
.btn{
 padding:10px 16px;
 border-radius:10px;
 border:1px solid var(--border);
 background:#1b1b1d;
 color:#fff;
 font-weight:700;
 cursor:pointer;
 text-decoration:none;
 display:inline-flex;
 align-items:center;
 justify-content:center;
}
.btn:hover{background:#222}
.btn--primary{
 background:var(--brand);
 border:none;
}
.btn--ghost{
 background:transparent;
}
.btn--sm{
 padding:6px 10px;
 font-size:13px;
}
.field{
 display:flex;
 flex-direction:column;
 gap:6px;
 margin-bottom:12px;
}
.label{
 font-size:13px;
 color:var(--muted);
 font-weight:700;
}
.input,.textarea,.select{
 background:#0f0f11;
 border:1px solid var(--border);
 color:#fff;
 border-radius:10px;
 padding:10px 12px;
 font-size:14px;
}
.textarea{min-height:90px}
.small{
 font-size:12px;
 color:var(--muted);
}
.hr{
 height:1px;
 background:var(--border);
 margin:20px 0;
}
.note{
 background:#141416;
 border:1px solid var(--border);
 padding:8px;
 border-radius:10px;
}
.range{cursor:pointer}
.toolSearch{
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: auto;
}

.toolSearch__input{
  width: 100%;
  height: 52px;

  padding: 0 18px 0 48px;

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

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.02)
    );

  backdrop-filter: blur(10px);

  color: white;
  font-size: 15px;
  font-weight: 500;

  outline: none;

  transition:
    border .25s,
    box-shadow .25s,
    background .25s;
}

.toolSearch__input::placeholder{
  color: rgba(255,255,255,.35);
}

/* hover */

.toolSearch__input:hover{
  border-color: rgba(255,255,255,.16);
}

/* focus */

.toolSearch__input:focus{
  border-color: rgba(227,6,19,.6);

  box-shadow:
    0 0 0 2px rgba(227,6,19,.15),
    0 6px 20px rgba(227,6,19,.08);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.03)
    );
}

/* icon */

.toolSearch__icon{
  position: absolute;

  left: 16px;
  top: 50%;

  width: 18px;
  height: 18px;

  transform: translateY(-50%);

  color: rgba(255,255,255,.45);

  pointer-events: none;
}