/* =====================================================================
   Swaplse — самодостаточный styles.css
   Собран из index1.html: переменные, шапка, сайдбар, кнопки, чипсы,
   строка поиска, вкладки. Без внешних зависимостей.
   Подключение:  <link rel="stylesheet" href="styles.css">
   ===================================================================== */

/* ---------- 1. Переменные темы ------------------------------------- */
:root{
  --or:       #ff7802;          /* фирменный оранжевый */
  --or-2:     #ff8a00;
  --or-3:     #ff9a3d;
  --or-soft:  #ffb43d;
  --accent:   #ff7802;

  --bg:       #0a0a0a;
  --bg-2:     #0e0c0a;
  --card:     #141414;
  --card-2:   #17171b;
  --hover:    #1f1f1f;
  --line:     rgba(255,255,255,.09);
  --line-2:   #262626;

  --text:     #f4f1ec;
  --muted:    #8f8880;
  --muted-2:  #9aa;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;

  --font: "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- 2. Базовая сброс-обвязка -------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 var(--font);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
img{max-width:100%;display:block}

/* Тонкий скроллбар в тёмном стиле */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#333;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#555}

/* =====================================================================
   3. ШАПКА (.head)
   ===================================================================== */
.head{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}

/* 3.1. Верхний ряд: бургер + логотип + правые действия */
.head-row{
  display:flex;align-items:center;gap:14px;
  height:60px;padding:0 20px;
}
.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:0;border-radius:var(--radius-sm);
  background:transparent;color:var(--muted);
  transition:background .15s,color .15s;
}
.burger:hover{background:var(--hover);color:var(--text)}
.burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.logo{display:inline-flex;align-items:center;gap:8px}
.logo img{height:21px;width:auto}

.head-right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* 3.2. Обёртка «Create» с выпадающим меню */
.crt-wrap{position:relative}
.crt-chev{width:14px;height:14px;margin-left:6px;
  transition:transform .18s}
.crt-wrap.open .crt-chev{transform:rotate(180deg)}

.crt-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  min-width:220px;padding:8px;
  background:var(--card-2);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.crt-menu a{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:9px;
  color:#c6c6c6;font-size:13.5px;font-weight:600;
}
.crt-menu a:hover,
.crt-menu a.on{background:rgba(255,120,2,.09);color:#fff}
.crt-menu a svg{width:16px;height:16px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* Место под иконки монет/уведомлений/аватар */
.gems{display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);
  font-size:13px;font-weight:700;color:var(--or-soft)}
.bell{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius-sm);
  background:transparent;color:var(--muted)}
.bell:hover{background:var(--hover);color:var(--text)}
.bell svg{fill:none;stroke:currentColor}
.me-slot{width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#2a2a2a,#141414);
  border:1px solid var(--line)}

/* 3.3. Второй этаж: вкладки типов работ + поиск */
.head-tabs{
  display:flex;align-items:center;gap:18px;
  padding:0 20px 0;
  border-top:1px solid var(--line);
}
.type-tabs-row{display:flex;align-items:center;gap:2px}
.type-tabs-row a,
.type-tabs-row button{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:12px 12px;border:0;background:transparent;
  color:var(--muted);font-size:13.5px;font-weight:600;
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.type-tabs-row a:hover,
.type-tabs-row button:hover{color:var(--text)}
.type-tabs-row .on,
.type-tabs-row a.on,
.type-tabs-row button.on{
  color:#fff;border-bottom-color:var(--or);
}
.type-tabs-row svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.type-tabs-row .count{
  font-size:11px;color:var(--muted);
  background:var(--card);border:1px solid var(--line-2);
  padding:1px 6px;border-radius:6px;
}

/* 3.4. Строка поиска "Search works" */
.sbox{position:relative;flex:1;max-width:420px;margin-left:auto}
.head-search{position:relative}
.head-search svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--muted);pointer-events:none;
  fill:none;stroke:currentColor;stroke-width:2;
}
.head-search input{
  width:100%;
  padding:9px 14px 9px 40px;
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:999px;
  color:#fff;font-size:13.5px;font-family:inherit;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.head-search input::placeholder{color:var(--muted)}
.head-search input:focus{
  border-color:var(--or);
  box-shadow:0 0 0 3px rgba(255,120,2,.14);
}

/* Выпадающая панель результатов поиска */
.sdrop{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  background:var(--card-2);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  max-height:60vh;overflow:auto;
}
.sdrop[hidden]{display:none}

/* =====================================================================
   4. ОБЩИЙ КАРКАС: .shell + .body
   ===================================================================== */
.shell{
  display:flex;align-items:flex-start;gap:0;
  max-width:1600px;margin:0 auto;
}
.body{flex:1;min-width:0;padding:24px 28px}

/* Тёмный фон-подложка на случай мобильного меню */
.mbackdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:30;
}
.mbackdrop[hidden]{display:none}

/* =====================================================================
   5. САЙДБАР (.side)
   ===================================================================== */
.side{
  flex:0 0 236px;
  align-self:stretch;
  padding:16px 12px 16px 16px;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  min-height:calc(100vh - 110px);
  position:sticky;top:110px;
}

/* Пункт сайдбара */
.sn{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:10px 12px;border:0;
  background:transparent;border-radius:var(--radius-sm);
  color:#c6c6c6;font-size:14px;font-weight:600;
  text-align:left;
  transition:background .15s,color .15s;
}
.sn + .sn{margin-top:2px}
.sn:hover{background:var(--hover);color:#fff}
.sn.on{background:rgba(255,120,2,.10);color:#fff}
.sn .ic{
  flex:0 0 22px;width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
}
.sn .ic svg{
  width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.sn .ic img{width:20px;height:20px}
.sn .txt{flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sn .new{
  flex:none;font-size:10px;font-weight:800;letter-spacing:.04em;
  padding:2px 7px;border-radius:999px;
  background:var(--or);color:#160f05;
}
.sn .chev{margin-left:auto;font-size:10px;color:var(--muted);
  transition:transform .18s}

/* Раскрываемый блок «Create» в сайдбаре */
.sn-crt{display:block}
.sn-crt.open .chev{transform:rotate(180deg);color:var(--or-3)}
.sn-sub{
  display:flex;flex-direction:column;gap:2px;
  padding:4px 0 6px 8px;margin:2px 0 4px 12px;
  border-left:1px solid rgba(255,163,26,.25);
}
.sn-sub a{
  display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:9px;
  color:#c6c6c6;font-size:13px;font-weight:500;
}
.sn-sub a:hover,
.sn-sub a.on{background:rgba(255,163,26,.09);color:#fff}
.sn-sub a svg{width:16px;height:16px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sn-sub[hidden]{display:none}

/* Низ сайдбара: служебные ссылки + юридика */
.side .foot{
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--line);
}
.sf{
  display:flex;align-items:center;gap:12px;
  padding:8px 12px;border-radius:var(--radius-sm);
  color:#c6c6c6;font-size:13.5px;font-weight:600;
  transition:background .15s,color .15s;
}
.sf:hover{background:var(--hover);color:#fff}
.sf .ic{width:20px;height:20px;flex:none}
.sf .sup-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--or);margin-left:auto;
  box-shadow:0 0 0 3px rgba(255,120,2,.18);
}
.side-legal{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:10px;padding:0 12px;
  font-size:11px;color:var(--muted);
}
.side-legal a:hover{color:var(--text)}
.side-legal i{opacity:.5;font-style:normal}

/* =====================================================================
   6. КНОПКИ
   ===================================================================== */

/* 6.1. Градиентная кнопка (главная, оранжевая) */
.btn-grad{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border:0;border-radius:999px;
  background:linear-gradient(135deg,#ff7802,#ffb43d);
  color:#160f05;font-size:13.5px;font-weight:800;
  box-shadow:0 10px 24px rgba(255,120,2,.24);
  transition:transform .12s,box-shadow .12s,filter .12s;
}
.btn-grad:hover{transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(255,120,2,.32);
  filter:brightness(1.03)}
.btn-grad:active{transform:translateY(0)}
.btn-grad:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.btn-grad svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* 6.2. Мягкая кнопка (второстепенная) */
.btn-soft{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--card);color:var(--text);
  font-size:13.5px;font-weight:700;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-soft:hover{background:var(--hover);border-color:#3a3a3a;color:#fff}
.btn-soft svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 6.3. «Призрачная» кнопка (только контур) */
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border:1px solid var(--line-2);border-radius:999px;
  background:transparent;color:var(--text);
  font-size:13.5px;font-weight:700;
  transition:border-color .15s,color .15s,background .15s;
}
.btn-ghost:hover{border-color:var(--or);color:var(--or-3);
  background:rgba(255,120,2,.06)}

/* 6.4. Чипсы (фильтры-пилюли) */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--card);color:var(--text);
  font-size:12.5px;font-weight:600;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.chip:hover{background:var(--hover);border-color:#3a3a3a}
.chip.active{
  background:var(--or);color:#160f05;border-color:var(--or);
  font-weight:800;
}
.chiprow{
  display:flex;align-items:center;gap:8px;
  overflow-x:auto;padding-bottom:4px;
  -ms-overflow-style:none;scrollbar-width:none;
}
.chiprow::-webkit-scrollbar{display:none}

/* Ряд сортировки «Top / New» */
.sort{display:inline-flex;gap:4px}
.sort button{
  padding:7px 12px;border:0;border-radius:999px;
  background:transparent;color:var(--muted);
  font-size:12.5px;font-weight:700;
  transition:background .15s,color .15s;
}
.sort button:hover{color:var(--text)}
.sort button.on{background:var(--card);color:#fff}

/* 6.5. Кнопка «Pay by card» (касса, оранжевая карточка) */
.pb-card{
  position:relative;display:flex;align-items:center;gap:12px;
  width:100%;padding:14px 16px;border:0;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#ff7802,#ffb43d);
  color:#160f05;text-align:left;
  box-shadow:0 14px 34px rgba(255,120,2,.24);
  transition:transform .12s,box-shadow .12s;
}
.pb-card:hover:not(:disabled){transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(255,120,2,.3)}
.pb-card:disabled{opacity:.5;cursor:default;box-shadow:none}
.pb-card .pbc-ico{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 40px;border-radius:var(--radius-md);
  background:rgba(22,15,5,.14);
}
.pb-card .pbc-txt{display:flex;flex-direction:column;gap:2px;
  min-width:0;flex:1}
.pb-card .pbc-txt b{font-size:17px;font-weight:800;line-height:1.15}
.pb-card .pbc-txt small{font-size:12px;opacity:.72;font-weight:600}
.pb-card .pbc-marks{display:flex;gap:5px;align-items:center;flex:0 0 auto;
  margin-top:14px}
.pb-card .pbc-marks img{height:20px;width:auto;background:#fff;
  border-radius:4px;padding:2px 3px}

/* «Стеклянный» бейдж-уголок */
.pbc-tag{
  position:absolute;top:-11px;right:14px;
  display:inline-flex;align-items:center;gap:5px;
  font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  white-space:nowrap;color:#ffcf8a;
  background:rgba(18,11,3,.62);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(255,180,61,.42);
  padding:4px 11px;border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.45),0 0 16px rgba(255,140,20,.18);
}

/* 6.6. Плитки провайдеров оплаты */
.pg-all{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pg-grid .pgb,
.payb2 .pb{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border:0;border-radius:13px;
  background:#efefef;color:#1a1a1c;text-align:left;
  font-family:inherit;cursor:pointer;
  transition:transform .12s,box-shadow .12s;
}
.pg-grid .pgb:hover,
.payb2 .pb:hover{transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.35)}
.pg-grid .pgb b,
.payb2 .pb b{font-size:13.5px;font-weight:800;line-height:1.2}
.pg-grid .pgb small{font-size:10.5px;color:#6b6b70;font-weight:600}
.pg-grid .pgb .ic{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.pg-grid .pgb .ic img,
.pg-grid .pgb .ic svg{height:15px;width:auto}

/* 6.7. Селектор страны в шапке кассы */
.pay-geo{position:relative;display:inline-flex;align-items:center}
.pay-geo select{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;font-family:inherit}
.pay-geo-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:32px;padding:0 10px 0 8px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-sm);
  font-size:13.5px;font-weight:700;color:#e8e2da;
  transition:background .15s,border-color .15s;
}
.pay-geo-btn:hover{background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.3)}

/* =====================================================================
   7. МЕЛОЧИ, ВСТРЕЧАЮЩИЕСЯ РЯДОМ
   ===================================================================== */

/* Заголовок раздела */
.hx1{font-size:20px;font-weight:800;letter-spacing:-.2px;
  margin:0 0 4px;color:var(--text)}

/* Заголовок h1 на главной */
.home-h1{
  font-size:17px;font-weight:800;letter-spacing:-.2px;
  margin:18px 0 -6px;color:var(--text);
}

/* Полоса фильтров */
.filterline{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:14px 0 12px;
}

/* Плавающая кнопка поддержки */
.sup-fab{
  position:fixed;right:20px;bottom:20px;z-index:40;
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 16px;border-radius:999px;
  background:linear-gradient(135deg,#ff7802,#ffb43d);
  color:#160f05;font-size:13.5px;font-weight:800;
  box-shadow:0 14px 34px rgba(255,120,2,.32);
  transition:transform .12s,box-shadow .12s;
}
.sup-fab:hover{transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(255,120,2,.4)}
.sup-fab svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sup-fab .sup-dot{
  width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.25);
}

/* Сетка работ (общая обёртка) */
.grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

/* =====================================================================
   8. АДАПТИВ
   ===================================================================== */
@media(max-width:1100px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .side{
    position:fixed;top:0;bottom:0;left:0;z-index:40;
    width:260px;padding-top:70px;
    background:var(--bg);
    transform:translateX(-100%);
    transition:transform .25s ease;
    border-right:1px solid var(--line);
    min-height:100vh;
  }
  .side.open{transform:translateX(0)}
  .body{padding:18px 16px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .head-row{padding:0 14px}
  .head-tabs{padding:0 14px}
  .sbox{max-width:none;margin-left:0;flex:1}
}
@media(max-width:640px){
  .head-row{height:56px;gap:10px}
  .head-tabs{flex-wrap:wrap;gap:10px;padding-bottom:8px}
  .type-tabs-row{flex:1;overflow-x:auto;
    -ms-overflow-style:none;scrollbar-width:none}
  .type-tabs-row::-webkit-scrollbar{display:none}
  .sbox{order:2;width:100%;max-width:none}
  .grid{grid-template-columns:1fr}
  .hx1{font-size:18px}
  .home-h1{font-size:15px;margin:14px 0 -4px}
}