/* ===================== TOKENS ===================== */
:root{
  --bg: #121014;
  --bg-elevated: #19161b;
  --bg-card: #1e1a20;
  --bg-card-hover: #241f26;
  --border: #2c262c;

  --laranja: #ff7a29;
  --laranja-soft: #ffa159;
  --laranja-dim: #c25a1c;
  --roxo: #7c5cff;
  --roxo-soft: #a893ff;

  --text: #f2ede6;
  --text-dim: #b8b0b8;
  --text-faint: #766f77;

  --success: #4caf7d;
  --danger: #e5484d;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --shadow-card: 0 10px 30px -12px rgba(0,0,0,0.6);
  --shadow-pop: 0 20px 60px -15px rgba(0,0,0,0.75);
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html{
  background: var(--bg);
}

body{
  margin:0;
  background:
    radial-gradient(ellipse 1000px 620px at 10% -8%, rgba(255,122,41,0.19), transparent 55%),
    radial-gradient(ellipse 900px 640px at 100% -4%, rgba(124,92,255,0.17), transparent 55%),
    radial-gradient(ellipse 750px 520px at 88% 55%, rgba(255,122,41,0.08), transparent 60%),
    radial-gradient(ellipse 850px 520px at 4% 92%, rgba(124,92,255,0.10), transparent 60%),
    radial-gradient(ellipse 700px 460px at 55% 120%, rgba(255,122,41,0.06), transparent 60%),
    linear-gradient(180deg, #171219 0%, var(--bg) 360px, var(--bg) 100%);
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: none;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

button, a, input, textarea, select, .anime-card, .card-poster, .card-edit-btn, .chip{
  -webkit-tap-highlight-color: transparent;
}
button:focus, a:focus{ outline: none; }

h1,h2,h3{ font-family: var(--font-display); margin:0; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; }

.hidden{ display:none !important; }

::selection{ background: var(--laranja); color:#1a1310; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: #38313a; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--laranja-dim); }

/* ===================== LOADING ===================== */
#splash{
  position: fixed; inset:0; z-index: 9999;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
}
#splash.hidden{ display:none !important; }
.splash-content{ text-align:center; }
.splash-icon{
  width: 56px; height:56px; border-radius: 16px; margin: 0 auto;
  background: linear-gradient(135deg, var(--laranja), var(--roxo));
  display:flex; align-items:center; justify-content:center;
  color:#1a1310;
  font-size: 26px;
}
.splash-sub{ color: var(--text-faint); margin-top: 14px; font-size: .85rem; letter-spacing: .3px; }
.splash-bar{ width: 180px; height: 3px; background: var(--border); border-radius: 4px; margin: 16px auto 0; overflow:hidden; }
.splash-bar-fill{ width:30%; height:100%; background: linear-gradient(90deg, var(--laranja), var(--roxo)); border-radius: 4px; }

/* ===================== HEADER ===================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(15,13,17,0.96);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02);
}
.header-inner{
  max-width: 1300px; margin:0 auto; padding: 14px 28px;
  display:flex; align-items:center; gap: 24px;
}
.logo{ display:flex; align-items:center; gap:8px; cursor:pointer; flex-shrink:0; }
.logo-icon{
  width: 36px; height:36px; border-radius: 11px;
  background: linear-gradient(135deg, var(--laranja), var(--roxo));
  display:flex; align-items:center; justify-content:center;
  color:#1a1310; flex-shrink:0;
  box-shadow: 0 4px 14px -4px rgba(255,122,41,0.5);
  font-size: 16px;
}
.logo-text{ font-family: var(--font-display); font-weight:500; font-size: 1.05rem; }
.logo-text strong{ color: var(--laranja); font-weight:700; }

.search-wrap{ position:relative; flex:1; max-width: 380px; }
.search-wrap input{
  width:100%; background: var(--bg-elevated); border:1px solid var(--border);
  color: var(--text); padding: 9px 38px 9px 14px; border-radius: 999px;
  font-size:.85rem; outline:none;
}
.search-wrap input:focus{ border-color: var(--laranja); }
.search-icon{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:14px; height:14px; color: var(--text-faint); }

.header-actions{ display:flex; align-items:center; gap: 8px; margin-left:auto; flex-shrink:0; }

.header-stats{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap: 8px 22px; padding: 7px 16px; max-width: 100%;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
  font-size:.76rem; color: var(--text-faint);
}
.header-stats span{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.header-stats i{ color: var(--laranja-soft); font-size:.7rem; }
.header-stats b{ color: var(--text); font-weight:700; }

.btn{
  border:none; border-radius: 999px; padding: 8px 14px; font-size:.8rem;
  font-weight:600; display:inline-flex; align-items:center; gap:6px;
  white-space: nowrap;
}
.btn-primary{ background: linear-gradient(135deg, var(--laranja), #ff9248); color:#1c1108; }
.btn-outline{ background: transparent; border:1px solid var(--border); color: var(--text); }
.btn-outline:hover{ border-color: var(--laranja); color: var(--laranja-soft); }
.btn-danger{ background: rgba(229,72,77,0.12); color:#ff8b8e; border:1px solid rgba(229,72,77,0.3); }
.btn-block{ width:100%; justify-content:center; margin-top: .5rem; }

.admin-badge{
  display:flex; align-items:center; gap:7px; font-size:.78rem; color: var(--success);
  background: rgba(76,175,125,0.1); border:1px solid rgba(76,175,125,0.3);
  padding: 7px 12px; border-radius: 999px;
}
.admin-badge .dot{ width:6px; height:6px; border-radius:50%; background: var(--success); }
.admin-badge button{ background:none; border:none; color: var(--text-dim); font-size:.85rem; margin-left:2px; }
.admin-badge button:hover{ color: var(--danger); }

/* ===================== HERO ===================== */
.hero{ position:relative; padding: 50px 28px 26px; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background: radial-gradient(circle at 30% 20%, rgba(255,122,41,0.2), transparent 45%),
              radial-gradient(circle at 80% 60%, rgba(124,92,255,0.17), transparent 45%),
              radial-gradient(circle at 50% 100%, rgba(255,122,41,0.08), transparent 50%);
}
.hero-content{ position:relative; z-index:1; max-width: 900px; margin: 0 auto; text-align:center; }
.hero h1{
  font-size: clamp(1.6rem, 4vw, 2.7rem); font-weight:700; line-height:1.15;
}
.hero h1 span{
  background: linear-gradient(90deg, var(--laranja), var(--roxo-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ color: var(--text-dim); margin-top: 10px; font-size: .95rem; }

/* ===================== CATEGORIAS / GRID ===================== */
.categorias-container{ max-width: 1400px; margin: 0 auto; padding: 40px 28px 20px; }
.categoria-section{
  margin-bottom: 44px;
  content-visibility: auto; contain-intrinsic-size: 420px;
}

.categoria-header{ display:flex; align-items:baseline; gap: 12px; margin-bottom: 16px; padding: 0 2px; }
.categoria-header h2{ font-size: 1.2rem; color: var(--text); position:relative; padding-left: 14px; letter-spacing:.2px; }
.categoria-header h2::before{
  content:''; position:absolute; left:0; top:4px; bottom:4px; width:4px;
  background: linear-gradient(180deg, var(--laranja), var(--roxo)); border-radius: 4px;
}
.categoria-count{ color: var(--text-faint); font-size:.8rem; }

/* Trilho horizontal estilo "Crunchyroll" com scroll suave por categoria */
.cards-grid{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(165px, 195px);
  grid-template-rows: auto;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 14px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.cards-grid::-webkit-scrollbar{ height: 6px; }
.cards-grid::-webkit-scrollbar-thumb{ background: #38313a; border-radius: 10px; }

@media (min-width: 860px){
  /* Em telas largas, vira grade que se ajusta sem depender de scroll */
  .cards-grid{
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    overflow: visible;
  }
}

/* CARD */
.anime-card{
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  cursor:pointer; position:relative;
  contain: layout paint;
}

.card-poster{
  position:relative; width:100%; aspect-ratio: 3/4; overflow:hidden;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.card-poster img{ width:100%; height:100%; object-fit:cover; display:block; }

.anime-card:active .card-poster{
  border-color: var(--laranja-dim);
}

.card-poster-overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(10,8,10,0.92) 100%);
  display:flex; align-items:flex-end; padding: 10px 10px 34px;
  opacity:0; pointer-events:none;
}
.anime-card:hover .card-poster-overlay{ opacity:1; }
.card-poster-overlay span{ font-size:.7rem; color: var(--laranja-soft); font-weight:600; }

.card-status-tag{
  position:absolute; top:8px; left:8px; z-index:2; font-size:.62rem; font-weight:700; text-transform:uppercase;
  padding: 4px 9px; border-radius: 999px; letter-spacing:.5px;
  background: rgba(10,8,10,0.88); color: var(--text);
}
.card-status-tag.assistindo{ color: var(--laranja-soft); }
.card-status-tag.completo{ color: var(--success); }
.card-status-tag.pausado{ color: #e8c15a; }
.card-status-tag.planejo-assistir{ color: var(--roxo-soft); }
.card-status-tag.abandonado{ color: var(--danger); }

.card-nota{
  position:absolute; top:8px; right:8px; z-index:2; font-size:.68rem; font-weight:700;
  background: rgba(10,8,10,0.88); color: var(--laranja-soft);
  padding: 4px 8px; border-radius: 999px; display:flex; align-items:center; gap:3px;
}

/* Botão de editar — canto inferior direito do pôster, só aparece para o admin */
.card-edit-btn{
  position:absolute; right:8px; bottom:8px; z-index:3;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(10,8,10,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center;
  color: var(--text);
}
.card-edit-btn svg{ width:14px; height:14px; }
.card-edit-btn:hover{ background: var(--laranja); border-color: transparent; color:#1c1108; }

.card-body{ padding: 12px 2px 0; display:flex; flex-direction:column; gap:6px; }
.card-title{
  font-family: var(--font-display); font-size:.87rem; font-weight:600; color: var(--text);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
  line-height:1.3;
}
.card-sub{
  font-size:.75rem; color: var(--text-faint);
  display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-sub .dot-sep{ opacity:.6; }
.card-sub .prog{ color: var(--laranja-soft); font-weight:600; }

.card-progress-bar{ height:3px; background: var(--border); border-radius:3px; margin-top:2px; overflow:hidden; }
.card-progress-fill{ height:100%; background: linear-gradient(90deg, var(--laranja), var(--roxo)); }

@media (hover: none){
  /* dispositivos touch: mantém o botão de editar sempre visível, sem depender de :hover */
  .card-poster-overlay{ display:none; }
}

/* ===================== EMPTY STATE ===================== */
.empty-state{ text-align:center; padding: 80px 20px; color: var(--text-faint); font-size: 1rem; }

/* ===================== FOOTER ===================== */
.site-footer{ text-align:center; padding: 30px; color: var(--text-faint); font-size:.8rem; border-top:1px solid var(--border); margin-top: 40px; }
.footer-credit{ color: var(--text-dim); font-size:.82rem; margin-bottom: 6px; display:flex; align-items:center; justify-content:center; gap:7px; }
.footer-credit i{ color: var(--laranja-soft); }
.footer-credit strong{ color: var(--laranja-soft); font-weight:700; }

/* ===================== MODAIS ===================== */
.modal-overlay{
  position:fixed; inset:0; z-index: 500; background: rgba(8,6,9,0.8);
  display:flex; align-items:center; justify-content:center; padding: 20px;
}

.modal{
  background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius-lg);
  max-width: 640px; width:100%; max-height: 88vh; overflow-y:auto; position:relative;
  box-shadow: var(--shadow-pop);
}

.modal-close{
  position:absolute; top:14px; right:16px; z-index:5; background: rgba(0,0,0,0.4); border:none;
  color: var(--text); width:32px; height:32px; border-radius:50%; font-size:1.3rem; line-height:1;
}
.modal-close:hover{ background: var(--laranja); color:#1a1310; }

.modal-small{ max-width: 400px; padding: 30px; }
.modal-form{ max-width: 700px; padding: 30px; }
.modal-title{ font-size: 1.3rem; margin-bottom: 4px; }
.modal-sub{ color: var(--text-faint); font-size:.85rem; margin-bottom: 20px; }

/* ---- Detalhes do anime ---- */
.modal-detalhes{ max-width: 780px; padding:0; }
.detalhes-banner{ width:100%; height: 200px; background-size:cover; background-position:center; position:relative; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.detalhes-banner-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(18,16,20,0.1), var(--bg-elevated) 95%); }

.detalhes-body{ display:flex; gap: 24px; padding: 0 30px 30px; margin-top: -70px; position:relative; z-index:2; }
.detalhes-capa img{ width: 150px; aspect-ratio:2/3; object-fit:cover; border-radius: var(--radius-md); border: 3px solid var(--bg-elevated); box-shadow: var(--shadow-card); flex-shrink:0; }
.detalhes-info{ flex:1; padding-top: 76px; min-width:0; }

.detalhes-status-tag{
  display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding: 4px 10px; border-radius: 999px; background: rgba(255,122,41,0.15); color: var(--laranja-soft); margin-bottom: 8px;
}
.detalhes-info h2{ font-size: 1.5rem; line-height:1.2; }
.det-nome-original{ color: var(--text-faint); font-size:.85rem; margin-top:2px; font-style:italic; }

.det-meta-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px 14px; margin: 20px 0; }
.det-meta-grid div{ display:flex; flex-direction:column; gap:5px; }
.det-meta-grid label{ font-size:.64rem; text-transform:uppercase; letter-spacing:.5px; color: var(--text-faint); display:flex; align-items:center; gap:5px; }
.det-meta-grid span{ font-size:.9rem; color: var(--text); font-weight:600; }

.det-notas{ display:flex; gap: 14px; margin: 14px 0; flex-wrap:wrap; }
.nota-box{ flex:1; min-width: 150px; background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }
.nota-box .nota-label{ font-size:.72rem; color: var(--text-faint); display:block; margin-bottom:4px; }
.nota-box .nota-valor{ font-family: var(--font-display); font-size: 1.4rem; font-weight:700; }
.nota-fas .nota-valor{ color: var(--laranja-soft); }
.nota-minha .nota-valor{ color: var(--roxo-soft); }

.det-generos{ display:flex; gap:8px; flex-wrap:wrap; margin: 10px 0; }
.det-generos span{ background: var(--bg-card); border:1px solid var(--border); padding: 4px 12px; border-radius: 999px; font-size:.75rem; color: var(--text-dim); }

.det-sinopse-titulo{ margin-top: 18px; font-size:1rem; color: var(--text); }
.det-sinopse{ color: var(--text-dim); font-size:.9rem; line-height:1.6; margin-top:8px; }
.det-sinopse-traducao{
  color: var(--text-faint); font-size:.7rem; margin-top:8px; display:flex; align-items:center; gap:5px;
}
.det-sinopse-traducao::before{
  content:'\f1ab'; font-family:'Font Awesome 6 Free'; font-weight:900; color: var(--roxo-soft);
}

.det-admin-actions{ display:flex; gap:14px; margin-top: 22px; justify-content:center; }

.det-meta-extra{ display:flex; flex-wrap:wrap; gap:8px; margin: 4px 0 14px; }
.det-meta-extra span:not(:empty){
  background: var(--bg-card); border:1px solid var(--border); color: var(--text-faint);
  font-size:.72rem; padding: 4px 10px; border-radius: 999px;
}
.det-meta-extra span:empty{ display:none; }

.btn-icon-action{
  display:flex; align-items:center; justify-content:center; border-radius: 50%;
  width: 44px; height: 44px; font-size:1rem;
}
.btn-icon-action.edit{ background: rgba(124,92,255,0.14); color: var(--roxo-soft); border:1px solid rgba(124,92,255,0.3); }
.btn-icon-action.edit:hover{ background: rgba(124,92,255,0.24); }
.btn-icon-action.danger{ background: rgba(229,72,77,0.12); color:#ff8b8e; border:1px solid rgba(229,72,77,0.3); }
.btn-icon-action.danger:hover{ background: rgba(229,72,77,0.22); }

/* ---- Busca automática (API) no formulário ---- */
.api-busca-box{
  background: linear-gradient(135deg, rgba(255,122,41,0.08), rgba(124,92,255,0.08));
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 16px; margin-bottom: 8px;
}
.api-busca-box > label{ display:flex; align-items:center; gap:7px; font-size:.82rem; color: var(--text); font-weight:600; margin:0 0 8px; }
.api-busca-box > label i{ color: var(--laranja-soft); }
.api-busca-row{ display:flex; gap:8px; }
.api-busca-row input{
  flex:1; background: var(--bg-card); border:1px solid var(--border); color: var(--text);
  padding: 10px 12px; border-radius: var(--radius-sm); outline:none; font-size:.88rem;
}
.api-busca-row input:focus{ border-color: var(--laranja); }
.api-busca-row input, #form-login input, #form-anime input{ transition: none; }
.api-busca-row .btn{ padding: 10px 16px; }
.api-busca-hint{ font-size:.7rem; color: var(--text-faint); margin-top:8px; }

.api-busca-resultados{
  margin-top: 10px; display:flex; flex-direction:column; gap:6px; max-height: 260px; overflow-y:auto;
}
.api-resultado-item{
  display:flex; align-items:center; gap:10px; background: var(--bg-card); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px; cursor:pointer; text-align:left;
}
.api-resultado-item:hover{ border-color: var(--laranja-dim); background: var(--bg-card-hover); }
.api-resultado-item img{ width: 38px; height: 54px; object-fit:cover; border-radius: 6px; flex-shrink:0; background: var(--bg-elevated); }
.api-resultado-info{ min-width:0; }
.api-resultado-info .nome{ font-size:.82rem; font-weight:600; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.api-resultado-info .sub{ font-size:.72rem; color: var(--text-faint); margin-top:2px; }
.api-busca-status{ font-size:.78rem; color: var(--text-faint); padding: 6px 2px; }

/* ---- Formulário login/admin ---- */
#form-login label, #form-anime label{ display:block; font-size:.78rem; color: var(--text-dim); margin: 12px 0 6px; }
#form-login input, #form-anime input, #form-anime select, #form-anime textarea{
  width:100%; background: var(--bg-card); border:1px solid var(--border); color: var(--text);
  padding: 10px 12px; border-radius: var(--radius-sm); outline:none; font-size:.88rem;
}
#form-login label, #form-anime label{ transition: none; }
#form-login input:focus, #form-anime input:focus, #form-anime select:focus, #form-anime textarea:focus{ border-color: var(--laranja); }
#form-anime textarea{ resize: vertical; }

.form-erro{ color: #ff8b8e; font-size:.8rem; margin-top: 10px; background: rgba(229,72,77,0.1); padding: 8px 12px; border-radius: var(--radius-sm); }

.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 6px; }
.form-field.span-2{ grid-column: 1 / -1; }
.checkbox-field label{ display:flex; align-items:center; gap:8px; font-size:.85rem; }
.checkbox-field input{ width:auto; }

.form-actions{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 24px; }

/* ===================== TOAST ===================== */
.toast{
  position: fixed; bottom: 26px; left:50%; transform: translateX(-50%);
  background: var(--bg-elevated); border:1px solid var(--laranja-dim); color: var(--text);
  padding: 12px 22px; border-radius: 999px; font-size:.85rem; z-index: 999;
  box-shadow: var(--shadow-pop);
}
.toast.erro{ border-color: var(--danger); color:#ff8b8e; }

/* ===================== RESPONSIVO ===================== */
@media (max-width: 720px){
  .header-inner{ flex-wrap:wrap; }
  .search-wrap{ order:3; max-width:100%; }
  .header-stats{ gap: 6px 14px; font-size:.7rem; padding: 6px 10px; }
  .det-meta-grid{ grid-template-columns: repeat(2, 1fr); }
  .det-meta-grid div{ align-items:center; }
  .det-meta-grid label{ justify-content:center; }
  .form-grid{ grid-template-columns: 1fr; }
  .detalhes-body{ flex-direction:column; align-items:center; text-align:center; }
  .detalhes-info{ padding-top: 16px; }
  .det-notas{ justify-content:center; }

  .categorias-container{ padding: 28px 16px 10px; }
  .categoria-section{ margin-bottom: 32px; }
  .cards-grid{ grid-auto-columns: minmax(140px, 158px); gap: 12px; padding: 4px 0 10px; }
  .card-title{ font-size:.8rem; }
  .card-sub{ font-size:.7rem; }
  .card-edit-btn{ width:27px; height:27px; }
}

* { animation: none !important; transition: none !important; }