:root { --bg:#0b0f17; --card:#111827; --text:#e5e7eb; --muted:#9ca3af; --line:#1f2937; --btn:#2563eb; }

*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text); }
.container{ width:min(1100px,92vw); margin:0 auto; padding:18px 0; }

h1{ margin:10px 0 12px; font-size:28px; }
.h2{ margin:0 0 10px; font-size:18px; }
.h3{ margin:16px 0 8px; font-size:15px; }
.lead{ color:var(--text); opacity:.92; line-height:1.45; }
.muted{ color:var(--muted); }
.notice{ background:#0f172a; border:1px solid var(--line); padding:12px; border-radius:10px; color:var(--muted); }

.tabs{ display:flex; gap:8px; margin:12px 0; }
.tab{ background:transparent; border:1px solid var(--line); color:var(--text); padding:10px 12px; border-radius:10px; cursor:pointer; }
.tab.active{ border-color:#334155; background:#0f172a; }

.panel{ display:none; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.panel.active{ display:block; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 860px){ .grid2{ grid-template-columns:1fr; } }

.drop{ position:relative; border:1px dashed #334155; background:#0f172a; border-radius:12px; padding:14px; min-height:120px; }
.drop input[type=file]{ width:100%; margin-top:10px; }
.drop-title{ font-weight:600; margin-bottom:6px; }
.drop-hint{ color:var(--muted); font-size:13px; }
.file-name{ margin-top:8px; color:#cbd5e1; font-size:13px; word-break:break-all; }

.label{ display:block; margin:0 0 6px; color:#cbd5e1; }
textarea{ width:100%; border-radius:12px; border:1px solid var(--line); background:#0f172a; color:var(--text); padding:12px; resize:vertical; }

.options{ display:flex; gap:16px; flex-wrap:wrap; margin:12px 0; color:#cbd5e1; }
.options select{ background:#0f172a; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:8px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--btn); border:1px solid transparent; color:white;
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
}
.btn.small{ padding:8px 10px; border-radius:10px; font-size:13px; }
.btn.ghost{ background:transparent; border:1px solid #334155; color:var(--text); }

.status{ margin-top:10px; color:var(--muted); }
.error{ margin-top:10px; padding:10px; border-radius:12px; background:#3f1d1d; border:1px solid #7f1d1d; color:#fecaca; }

.hr{ border:none; border-top:1px solid var(--line); margin:18px 0; }

.footer{ padding-bottom:30px; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.actions{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }

.topline{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.link{ color:#93c5fd; text-decoration:none; }
.link:hover{ text-decoration:underline; }

.spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid #334155; border-top-color:#93c5fd;
  animation:spin 1s linear infinite; margin-bottom:10px;
}
@keyframes spin{ to { transform:rotate(360deg); } }

.diff{ line-height:1.55; font-size:14px; }
.ins{ background:#0f2a14; padding:0 2px; border-radius:4px; }
.del{ background:#2a0f12; padding:0 2px; border-radius:4px; text-decoration:line-through; }
.eq{ }

.side-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 860px){ .side-wrap{ grid-template-columns:1fr; } }
.side-col{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.side-title{ padding:10px; background:#0f172a; border-bottom:1px solid var(--line); font-weight:600; }
.side-body{ padding:12px; background:#0b1220; min-height:200px; }
.empty{ color:transparent; }
.seo p, .seo li{ color:#cbd5e1; line-height:1.55; }
.faq details{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#0f172a; margin:8px 0; }
.faq summary{ cursor:pointer; font-weight:600; }
.lsi{ margin-top:14px; color:#94a3b8; font-size:13px; }