/* =========================
   SHAREV — Apple / Liquid Glass
   Accent: #C4F000
   ========================= */

:root{
  --bg:#f7f8fa;
  --bg2:#ffffff;
  --text:#0b0b0f;
  --muted:#6b6b73;

  --accent:#C4F000;
  --accent2:#9dff00;

  --border:rgba(0,0,0,.10);
  --border2:rgba(0,0,0,.06);

  --radius:22px;
  --radius2:16px;

  --shadow:0 22px 60px rgba(0,0,0,.10);
  --shadow2:0 10px 30px rgba(0,0,0,.08);

  --glass:rgba(255,255,255,.66);
  --glass2:rgba(255,255,255,.78);
}

html, body{
  height:100%;
}
body{
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* subtle mega-like background */
body:before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-1;
  background:
    radial-gradient(900px 520px at 12% 18%, rgba(196,240,0,.22), transparent 60%),
    radial-gradient(900px 520px at 82% 20%, rgba(0,180,255,.14), transparent 60%),
    radial-gradient(900px 520px at 78% 82%, rgba(255,0,150,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f7f8fa 55%, #ffffff 100%);
  filter:saturate(110%);
}

/* layout safety */
.container{
  max-width: 1160px;
}

/* hide legacy buttons (admin/new session) if appear */
.btn-new-session,
.btn-admin-refresh,
a[href="/admin"],
a[href="/admin/"],
a[href^="/admin?"]{
  display:none !important;
}

/* ===== TOPBAR ===== */
.topbar{
  position: sticky;
  top:0;
  z-index:50;
  background: rgba(247,248,250,.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border2);
}
.topbar-inner{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:-0.03em;
  font-size:18px;
}
.brand-mark{
  position:relative;
  padding-right:14px;
}
.brand-mark:after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  transform:translateY(-50%);
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--accent) 55%, var(--accent2) 100%);
  box-shadow:0 0 0 6px rgba(196,240,0,.12);
}

/* ===== HERO ===== */
.hero{
  padding: 56px 0 64px;
}
.hero-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:26px;
}

/* bring back big title */
.hero-head{
  max-width: 860px;
}
.hero-title{
  margin:0;
  font-size:62px;
  line-height:1.02;
  font-weight:900;
  letter-spacing:-0.04em;
}
.hero-accent{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-subtitle{
  margin:14px 0 0;
  font-size:18px;
  line-height:1.55;
  color:var(--muted);
}

/* upload card — glass */
.hero-card{
  width: min(980px, 100%);
  border-radius: calc(var(--radius) + 6px);
  background: var(--glass);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow:hidden;
  padding: 18px;
}

/* ===== BENEFITS ===== */
.benefits{
  width: min(980px, 100%);
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  margin-top: 6px;
}
.benefit{
  text-align:left;
  border-radius: 18px;
  background: var(--glass2);
  border:1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow2);
  padding:18px 18px 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.benefit h3{
  margin:0 0 8px;
  font-size:16px;
  font-weight:800;
  letter-spacing:-0.02em;
}
.benefit p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

@media (max-width: 980px){
  .hero-title{ font-size:46px; }
  .benefits{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .hero{ padding: 42px 0 54px; }
  .hero-title{ font-size:38px; }
  .hero-card{ padding:14px; border-radius: 22px; }
  .benefits{ grid-template-columns: 1fr; }
}

/* ===== FIX PsiTransfer / Bootstrap inside #upload ===== */
/* remove default hr spacing / legacy container padding */
body > .container{ padding-bottom: 0 !important; }

#upload{
  text-align:left;
}

/* Make panels look like Mega blocks */
#upload .panel,
#upload .well{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Titles (THIS FIXES "Файлы" WHITE) */
#upload .panel-heading,
#upload .panel-title,
#upload h3,
#upload h4,
#upload strong{
  color: var(--text) !important;
}

/* Some PsiTransfer styles may set heading to white — hard override */
#upload .upload-files .title,
#upload .upload-settings .title,
#upload .panel-heading,
#upload .panel-heading *,
#upload .panel-title *,
#upload .upload-files h3,
#upload .upload-settings h3{
  color: var(--text) !important;
  text-shadow: none !important;
}

/* Forms */
.form-control{
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.85) !important;
  box-shadow: none !important;
  height: 44px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
}
.form-control:focus{
  border-color: rgba(196,240,0,.75) !important;
  box-shadow: 0 0 0 6px rgba(196,240,0,.18) !important;
}

/* Buttons */
.btn{
  border-radius: 14px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
}
.btn-primary,
.btn-success{
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  color: #0b0b0f !important;
  border: 0 !important;
}
.btn-primary:hover,
.btn-success:hover{
  filter: brightness(.98);
}
.btn-default{
  background: rgba(255,255,255,.88) !important;
  color: var(--text) !important;
}
.btn:active{
  transform: translateY(1px);
}

/* input-group key button */
.input-group-addon,
.input-group-btn .btn{
  border-radius: 14px !important;
}
.input-group .form-control{
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}
.input-group-btn .btn{
  height:44px !important;
  padding: 10px 14px !important;
}

/* Tables */
.table{
  background: transparent !important;
}
.table > tbody > tr > td{
  border-top: 1px solid rgba(0,0,0,.08) !important;
}
.table-hover > tbody > tr:hover{
  background: rgba(196,240,0,.08) !important;
}

/* Upload empty state */
#dropHelper{
  position: fixed !important;
  inset: 0 !important;
  z-index: -1;
}
.drag #dropHelper{
  z-index: 9999 !important;
  background: rgba(11,11,15,.25) !important;
  border: 2px dashed rgba(255,255,255,.70) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.drag #dropHelper:before{
  color: #fff;
  opacity:.9;
}

/* Progress */
.progress{
  border-radius: 999px !important;
  overflow:hidden;
  height: 10px !important;
  background: rgba(0,0,0,.06) !important;
  box-shadow:none !important;
}
.progress-bar{
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
}

/* ===== FOOTER ===== */
.site-footer{
  padding: 24px 0 34px;
  margin-top: 34px;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.footer-left{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size: 13px;
}
.footer-brand{
  font-weight: 800;
  letter-spacing:-0.02em;
  color: var(--text);
}
.footer-dot{
  opacity:.5;
}
.footer-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-link{
  font-size: 13px;
  color: var(--muted);
  text-decoration:none;
}
.footer-link:hover{
  color: var(--text);
  text-decoration:none;
}

@media (max-width:560px){
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* =========================
   FIX: Bootstrap panels inside PsiTransfer upload app
   Kills .panel-primary/.panel-info look (blue headers etc.)
   ========================= */

#uploadApp .panel.panel-primary,
#uploadApp .panel.panel-info,
#uploadApp .panel.panel-default.panel-primary,
#uploadApp .panel.panel-default.panel-info{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* header (where "Файлы") */
#uploadApp .panel-primary > .panel-heading,
#uploadApp .panel-info > .panel-heading,
#uploadApp .panel.panel-default.panel-primary > .panel-heading,
#uploadApp .panel.panel-default.panel-info > .panel-heading,
#uploadApp .panel > .panel-heading{
  background: transparent !important;
  border: 0 !important;
  color: rgba(14,14,17,.65) !important;
  text-shadow: none !important;
  padding: 0 0 12px 0 !important;
}

/* make sure heading text isn't forced to white */
#uploadApp .panel-heading,
#uploadApp .panel-heading * ,
#uploadApp .panel-title,
#uploadApp .panel-title *{
  color: rgba(14,14,17,.65) !important;
}

/* body reset */
#uploadApp .panel-body{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ===== Make PsiTransfer internal blocks look like your Apple/liquid card ===== */
#uploadApp .upload-files,
#uploadApp .upload-settings{
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.08) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 18px !important;
}

/* drop zone */
#uploadApp .drop-area,
#uploadApp .upload-files .well{
  background: rgba(255,255,255,.65) !important;
  border: 1px dashed rgba(0,0,0,.18) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

/* buttons inside upload app */
#uploadApp .btn,
#uploadApp button{
  border-radius: 14px !important;
}

/* kill bootstrap "blue link" vibe in drop text */
#uploadApp a{
  color: var(--text) !important;
}
/* ===== KILL BLUE BORDER (panel-primary) ONLY INSIDE #download ===== */
#download .panel,
#download .panel.panel-primary,
#download .panel.panel-default,
#download .panel-primary {
  border: 1px solid rgba(0,0,0,.08) !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.08) !important;
}

/* если рамка рисуется у heading/body */
#download .panel-heading,
#download .panel-body,
#download .panel-footer {
  border: 0 !important;
}

/* на всякий случай: вырубаем любые "синие" обводки/тени от фокуса */
#download *:focus,
#download *:active {
  outline: none !important;
  box-shadow: none !important;
}
/* ===== FORCE REMOVE ALL BLUE PANELS (PsiTransfer / Bootstrap) ===== */

/* убираем рамки у любых panel-primary на сайте (и upload, и download) */
html body .panel.panel-primary,
html body .panel-primary,
html body .panel-default,
html body .panel {
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* убираем синие/голубые шапки и линии */
html body .panel-primary > .panel-heading,
html body .panel > .panel-heading {
  background: transparent !important;
  border: 0 !important;
  color: var(--text) !important;
}

/* иногда синяя “рамка” — это обводка у вложенного блока с файлами */
html body #uploadApp .upload-files,
html body #downloadApp .download-files,
html body #uploadApp .panel-body,
html body #downloadApp .panel-body {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* делаем всё “в карточку” (если хочешь именно apple/liquid) */
html body #uploadApp .panel,
html body #downloadApp .panel {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 22px !important;
  overflow: hidden;
}
/* ===== ERROR PAGE UI ===== */
.error-card{
  text-align:center;
  padding: 28px;
}

.error-icon{
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 22px;
  color: #0e0e11;
  background: rgba(196,240,0,.35);
  border: 1px solid rgba(0,0,0,.06);
}

.error-title{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
}

.error-text{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 14px 16px;
  word-break: break-word;
}

.error-actions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap: wrap;
}

/* немного "эппл" для вторичной кнопки */
.btn-default{
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;
  font-weight: 600;
}
.btn-default:hover{
  background: rgba(255,255,255,.95) !important;
}
/* SEO text block */
.seo-text {
  max-width: 880px;          /* читаемая ширина */
  margin: 0 auto 32px;       /* центр по горизонтали */
  text-align: center;        /* выравнивание текста */
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}


.faq { padding: 40px 0 80px; }
.faq-title{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.faq-list{ display: grid; gap: 12px; }

.faq-item{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
}
.faq-item summary{
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item p{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}