:root {
  --s1: 46,196,255;
  --s2: 255,195,55;
  --s3: 162,110,255;
  --s4: 56,215,160;
}

/* ════════════════════════════════════════════════════════════════════════════
   anime-tool.css  —  Anime Tool page specific styles
   Note: .card, .btn, .modal, .field-* intentionally override shared.css
   with anime-specific purple/glass aesthetic for this page.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Card (page override) ── */
.card {
  background: var(--card-bg); border: 1px solid var(--glass-border);
  border-radius: 20px; padding: 1.4rem 1.6rem; margin-bottom: 1rem;
  position: relative; overflow: hidden;
  backdrop-filter: blur(40px) saturate(140%); -webkit-backdrop-filter: blur(40px) saturate(140%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
}
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent); }
.card::after  { content:''; position:absolute; inset:0; background:var(--glass-shine); pointer-events:none; border-radius:20px; }

/* ── Section label (page override) ── */
.section-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 0.5rem; position: relative; z-index: 1;
}
.section-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(255,255,255,0.08),transparent); }

/* ── Config notice (page override) ── */
.config-notice { display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.8); backdrop-filter:blur(6px); align-items:center; justify-content:center; }
.config-notice.show { display:flex; }
.notice-card {
  background: linear-gradient(145deg,#100810,#0d0a14);
  border: 1px solid var(--accent-border); border-radius: 20px;
  padding: 2rem 2.25rem; max-width: 440px; width: 90%; text-align: center;
  animation: modalIn 0.3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes modalIn { from{transform:scale(0.92);opacity:0} to{transform:scale(1);opacity:1} }
.notice-icon  { font-size: 2.5rem; margin-bottom: 0.75rem; }
.notice-title { font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 0.5rem; }
.notice-body  { font-size: 0.82rem; color: var(--text-dim); line-height: 1.55; margin-bottom: 1.25rem; }
.notice-body a { color: var(--accent2); text-decoration: none; }
.notice-body a:hover { text-decoration: underline; }

/* ── Modal (page override) ── */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); z-index:500; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.2s; }
.modal-backdrop.open { opacity:1; pointer-events:all; }
.modal {
  background: linear-gradient(145deg,#100810,#0d0a14);
  border: 1px solid var(--accent-border); border-radius: 18px;
  padding: 1.75rem 2rem; width: 90%; max-width: 460px;
  animation: modalIn 0.25s cubic-bezier(.16,1,.3,1) both;
}
.modal h3     { margin:0 0 0.35rem; font-size:1.05rem; color:var(--text); }
.modal-sub    { font-size:0.8rem; color:var(--text-dim); margin:0 0 1.1rem; }
.modal-footer { display:flex; justify-content:flex-end; gap:0.5rem; }

/* ── Fields (page override) ── */
.field-label { font-size:0.64rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); margin-bottom:0.3rem; }
.field-input {
  width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--accent-border);
  border-radius:8px; padding:0.42rem 0.75rem; color:var(--text);
  font-family:inherit; font-size:0.84rem; outline:none; transition:border-color 0.2s; margin-bottom:0.85rem;
}
.field-input:focus       { border-color:rgba(232,121,249,0.55); }
.field-input::placeholder{ color:var(--text-muted); }

/* ── Buttons (page override) ── */
/* btn base + ghost/danger/success/sm/disabled inherited from shared.css */
/* anime-tool accent uses a distinct pink hover — keep that override */
.btn-accent:hover { background:rgba(232,121,249,0.18); border-color:rgba(232,121,249,0.5); }

/* ── Flow diagram ── */
.flow-steps      { display:flex; align-items:flex-start; gap:0; position:relative; z-index:1; flex-wrap:wrap; }
.flow-step       { display:flex; flex-direction:column; align-items:center; gap:0.5rem; flex:1; min-width:120px; text-align:center; padding:0.75rem 0.5rem; }
.flow-connector  { display:flex; align-items:center; padding-top:1.1rem; color:rgba(255,255,255,0.12); font-size:1.2rem; flex-shrink:0; }
.step-num        { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:800; flex-shrink:0; border:1px solid; }
.step-1 { background:rgba(var(--s1),0.12); border-color:rgba(var(--s1),0.3); color:rgb(var(--s1)); }
.step-2 { background:rgba(var(--s2),0.12); border-color:rgba(var(--s2),0.3); color:rgb(var(--s2)); }
.step-3 { background:rgba(var(--s3),0.12); border-color:rgba(var(--s3),0.3); color:rgb(var(--s3)); }
.step-4 { background:rgba(var(--s4),0.12); border-color:rgba(var(--s4),0.3); color:rgb(var(--s4)); }
.step-5 { background:rgba(var(--s1),0.12); border-color:rgba(var(--s1),0.3); color:rgb(var(--s1)); }
.step-title { font-size:0.75rem; font-weight:700; color:var(--text); line-height:1.3; }
.step-desc  { font-size:0.68rem; color:var(--text-dim); line-height:1.4; }

/* ── Connection status ── */
.conn-row  { display:flex; gap:0.75rem; flex-wrap:wrap; position:relative; z-index:1; }
.conn-chip { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0.85rem; border-radius:10px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); font-size:0.8rem; font-weight:600; color:var(--text); }
.conn-dot  { width:8px; height:8px; border-radius:50%; background:#333; flex-shrink:0; transition:all 0.3s; }
.conn-dot.ok       { background:var(--success); box-shadow:0 0 6px rgba(74,222,128,0.5); }
.conn-dot.err      { background:var(--danger); box-shadow:0 0 6px rgba(248,113,113,0.5); animation:blink 1.2s infinite; }
.conn-dot.checking { background:var(--warn); animation:blink 0.8s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── Stats ── */
.stats-row  { display:flex; gap:0.6rem; flex-wrap:wrap; position:relative; z-index:1; }
.stat-chip  { display:flex; align-items:center; gap:0.35rem; padding:0.28rem 0.75rem; border-radius:20px; font-size:0.73rem; font-weight:600; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); color:var(--text-dim); }
.stat-chip .val { font-size:0.95rem; font-weight:800; }
.stat-chip.pink .val   { color:var(--accent2); }
.stat-chip.yellow .val { color:var(--warn); }
.stat-chip.green .val  { color:var(--success); }
.stat-chip.blue .val   { color:#60a5fa; }

/* ── Show grid ── */
.show-toolbar  { display:flex; align-items:center; gap:0.65rem; flex-wrap:wrap; margin-bottom:0.85rem; position:relative; z-index:1; }
.filter-tabs   { display:flex; gap:0.3rem; }
.filter-tab    { padding:0.25rem 0.7rem; border-radius:20px; font-size:0.72rem; font-weight:600; border:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.03); color:var(--text-dim); cursor:pointer; font-family:inherit; transition:all 0.15s; }
.filter-tab:hover  { border-color:var(--accent-border); color:var(--text); }
.filter-tab.active { background:var(--accent-dim); border-color:var(--accent-border); color:var(--accent2); }
.search-input  { flex:1; min-width:130px; max-width:240px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:8px; padding:0.32rem 0.7rem; color:var(--text); font-size:0.79rem; font-family:inherit; outline:none; transition:border-color 0.2s; }
.search-input:focus       { border-color:var(--accent-border); }
.search-input::placeholder{ color:var(--text-muted); }
.show-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0.75rem; position:relative; z-index:1; }
.show-card { border-radius:14px; overflow:hidden; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); transition:all 0.2s; cursor:default; display:flex; flex-direction:column; }
.show-card:hover       { background:rgba(232,121,249,0.06); border-color:rgba(232,121,249,0.2); }
.show-card.marked      { border-color:rgba(232,121,249,0.35); background:rgba(232,121,249,0.07); }
.show-card.active-flow { border-color:rgba(251,191,36,0.4); background:rgba(251,191,36,0.07); animation:glowPulse 2s ease infinite; }
@keyframes glowPulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 12px rgba(251,191,36,0.2)} }
.show-card.done { border-color:rgba(74,222,128,0.25); background:rgba(74,222,128,0.05); }
.show-poster             { width:100%; aspect-ratio:2/3; object-fit:cover; display:block; background:rgba(255,255,255,0.03); }
.show-poster-placeholder { width:100%; aspect-ratio:2/3; background:linear-gradient(135deg,rgba(232,121,249,0.08),rgba(96,165,250,0.05)); display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.show-body  { padding:0.75rem 0.85rem; flex:1; display:flex; flex-direction:column; gap:0.4rem; }
.show-title { font-size:0.84rem; font-weight:700; color:var(--text); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.show-meta  { font-size:0.7rem; color:var(--text-dim); }
.show-flow-status { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.67rem; font-weight:700; padding:0.1rem 0.45rem; border-radius:20px; width:fit-content; }
.flow-idle     { background:rgba(255,255,255,0.05);  border:1px solid rgba(255,255,255,0.08);  color:var(--text-dim); }
.flow-waiting  { background:rgba(251,191,36,0.1);    border:1px solid rgba(251,191,36,0.3);    color:var(--warn); }
.flow-searching{ background:rgba(96,165,250,0.1);    border:1px solid rgba(96,165,250,0.3);    color:#60a5fa; }
.flow-checking { background:rgba(232,121,249,0.1);   border:1px solid rgba(232,121,249,0.3);   color:var(--accent2); }
.flow-done     { background:rgba(74,222,128,0.1);    border:1px solid rgba(74,222,128,0.3);    color:var(--success); }
.show-footer { padding:0.6rem 0.85rem; border-top:1px solid rgba(255,255,255,0.05); display:flex; gap:0.4rem; align-items:center; }

/* ── Pagination ── */
.pagination-row  { display:flex; align-items:center; justify-content:space-between; padding-top:0.85rem; margin-top:0.5rem; border-top:1px solid rgba(255,255,255,0.06); position:relative; z-index:1; flex-wrap:wrap; gap:0.5rem; }
.pagination-info { font-size:0.72rem; color:var(--text-muted); }
.pagination-btns { display:flex; gap:0.3rem; align-items:center; }
.page-btn { padding:0.25rem 0.6rem; border-radius:7px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); color:var(--text-dim); font-size:0.74rem; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.15s; }
.page-btn:hover:not(:disabled) { border-color:var(--accent-border); color:var(--accent2); background:var(--accent-dim); }
.page-btn:disabled { opacity:0.3; cursor:not-allowed; }
.page-btn.active   { border-color:var(--accent-border); background:var(--accent-dim); color:var(--accent2); }
.page-ellipsis     { font-size:0.74rem; color:var(--text-muted); padding:0 0.2rem; }

/* ── Exclusion / override lists ── */
.excl-add-row   { display:flex; gap:0.4rem; margin-bottom:0.75rem; position:relative; z-index:1; }
.excl-input     { flex:1; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:0.38rem 0.65rem; color:var(--text); font-size:0.82rem; font-family:inherit; outline:none; transition:border-color 0.2s; }
.excl-input:focus       { border-color:var(--accent-border); }
.excl-input::placeholder{ color:var(--text-muted); }
.excl-list, .override-list { display:flex; flex-direction:column; gap:0.3rem; position:relative; z-index:1; }
.excl-row, .override-row   { display:flex; align-items:center; gap:0.5rem; padding:0.4rem 0.65rem; border-radius:8px; background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.06); }
.excl-title, .override-title { flex:1; font-size:0.82rem; font-weight:500; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.excl-remove    { padding:0.18rem 0.45rem; border-radius:6px; border:1px solid rgba(248,113,113,0.25); background:rgba(248,113,113,0.06); color:var(--red); font-size:0.68rem; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.15s; flex-shrink:0; }
.excl-remove:hover { background:rgba(248,113,113,0.15); }
.excl-empty          { color:var(--text-muted); font-size:0.82rem; padding:0.5rem 0; }
.override-add-row    { display:grid; grid-template-columns:1fr 1fr auto; gap:0.4rem; margin-bottom:0.75rem; position:relative; z-index:1; }
.override-profile    { font-size:0.72rem; font-weight:700; padding:0.1rem 0.45rem; border-radius:20px; background:var(--accent-dim); border:1px solid var(--accent-border); color:var(--accent2); white-space:nowrap; }
.sub-section         { margin-top:1.25rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,0.06); position:relative; z-index:1; }
.sub-section-header  { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.65rem; }
.sub-section-label   { font-size:0.65rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); }

/* ── Log viewer ── */
.log-wrap         { background:rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.06); border-radius:12px; overflow:hidden; position:relative; z-index:1; }
.log-header       { display:flex; align-items:center; justify-content:space-between; padding:0.45rem 0.85rem; background:rgba(0,0,0,0.25); border-bottom:1px solid rgba(255,255,255,0.05); }
.log-header-title { font-size:0.62rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); }
.log-body         { max-height:280px; overflow-y:auto; padding:0.65rem 0.85rem; display:flex; flex-direction:column; gap:0.18rem; font-family:'DM Mono',monospace; font-size:0.75rem; }
.log-body::-webkit-scrollbar       { width:4px; }
.log-body::-webkit-scrollbar-thumb { background:rgba(232,121,249,0.2); border-radius:2px; }
.log-line  { display:flex; gap:0.5rem; white-space:nowrap; }
.log-ts    { color:var(--text-muted); flex-shrink:0; font-size:0.68rem; }
.log-text.info   { color:var(--text-dim); }
.log-text.flow   { color:var(--accent2); }
.log-text.search { color:#60a5fa; }
.log-text.found  { color:var(--success); font-weight:700; }
.log-text.warn   { color:var(--warn); }
.log-text.error  { color:var(--danger); }
.log-empty       { color:var(--text-muted); font-style:italic; }

/* ── Empty / spinner ── */
.empty-state { text-align:center; padding:3rem; color:var(--text-muted); font-size:0.85rem; position:relative; z-index:1; }
.spinner     { display:inline-block; width:13px; height:13px; border:2px solid rgba(232,121,249,0.15); border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Toast (centred) ── */
#toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(16,8,16,0.95); border:1px solid var(--accent-border); border-radius:10px; padding:0.6rem 1.2rem; font-size:0.82rem; font-weight:500; backdrop-filter:blur(20px); opacity:0; transition:all 0.3s; pointer-events:none; z-index:1000; white-space:nowrap; }
#toast.show    { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.success { border-color:rgba(74,222,128,0.4);  color:var(--success); }
#toast.error   { border-color:rgba(248,113,113,0.4); color:var(--danger); }
#toast.info    { border-color:rgba(232,121,249,0.4); color:var(--accent2); }

/* ── Mobile ── */
@media (max-width:540px) {
  body { padding: 0 0.5rem 3rem; }
  .card { padding: 1.1rem; }
  .flow-connector { display: none; }
  .show-grid { grid-template-columns: 1fr 1fr; }
}