:root { --bg:#0b0d10; --card:#151a21; --text:#e9eef5; --muted:#9aa7b4; --accent:#3aa3ff; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--text); }
header { display:flex; align-items:center; justify-content:space-between; padding:16px; background:#0e131a; border-bottom:1px solid #202631; gap:12px; }
h1 { margin:0; font-size:20px; }
.api-key input { padding:8px; width:240px; }
api-key button { margin-left:8px; padding:8px 12px; }
nav { display:flex; gap:10px; padding:10px 16px; border-bottom:1px solid #202631; flex-wrap:wrap; }
nav button { background:#0e131a; color:var(--text); border:1px solid #202631; padding:8px 12px; border-radius:6px; cursor:pointer; }
nav button.active { border-color: var(--accent); }
main { padding:16px; }
.tab { display:none; }
.tab.active { display:block; }
form { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
form input, form textarea, form select { background:var(--card); color:var(--text); border:1px solid #202631; border-radius:6px; padding:8px; }
form textarea { width:100%; min-height:120px; }
button { background:var(--accent); border:none; color:white; border-radius:6px; padding:8px 12px; cursor:pointer; margin:2px 6px 2px 0; }
.list { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.card { background:var(--card); padding:12px; border-radius:10px; border:1px solid #202631; }
.section { margin-bottom:16px; }
.tab > h2 { margin-top:0; margin-bottom:10px; }
.tab h3 { margin:8px 0; }
.row { display:flex; gap:8px; align-items:center; }
.muted { color:var(--muted); font-size:12px; }
.tag { display:inline-flex; align-items:center; padding:2px 6px; border-radius:999px; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; }
.tag-warn { background:rgba(255,102,102,0.12); color:#ff9a64; border:1px solid rgba(255,154,100,0.6); }
.tag-success { background:rgba(95,211,122,0.15); color:#5fd37a; border:1px solid rgba(95,211,122,0.5); }
.tag-muted { background:rgba(154,167,180,0.15); color:#9aa7b4; border:1px solid rgba(154,167,180,0.4); }
footer { padding:12px 16px; border-top:1px solid #202631; color:var(--muted); }
a.link { color: var(--accent); text-decoration: none; }
section .card { margin-bottom:12px; }
section .card:last-child { margin-bottom:0; }

#runResult {
  font-size: 15px;
  font-weight: 600;
  color: #e6edf3;
  margin-top: 6px;
  line-height: 1.6;
}

#runDomains {
  background: var(--card);
  color: var(--text);
  border: 1px solid #202631;
  border-radius: 6px;
  padding: 8px 10px;
  min-width: 220px;
}


.card > div:first-child, 
.card-header { 
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
    gap: 8px;
    max-width: 100%;
}


.card h2, .card h3, .card h4 {
    flex: 1 1 auto;
    min-width: 0; 
    margin: 0;
}


.card strong {
    flex: 0 0 auto;
}


.card > div:first-child > :last-child,
.card-header > :last-child {
    margin-left: auto;
}

#generatorTable input {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text);
    padding: 4px;
    width: 100%;
}
#generatorTable input:focus {
    border-color: var(--accent);
    background: #0e131a;
    outline: none;
}
#generatorTable tr {
    border-bottom: 1px solid #202631;
}
#generatorTable tr:hover {
    background: #1c232c;
}
#generatorPasteArea {
    width: 100%;
    font-family: monospace;
    font-size: 12px;
}

/* Modal Styles */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.modal-content {
  background: var(--card); width: 90%; max-width: 800px; padding: 25px; border-radius: 12px;
  border: 1px solid #202631; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* Toast Notification */
.toast {
  background: var(--card); color: white; padding: 12px 20px; border-radius: 8px;
  border-left: 4px solid var(--accent); margin-top: 10px; min-width: 250px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); animation: slideIn 0.3s ease-out;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.input-error {
    border: 1px solid #ff6666 !important;
    background-color: rgba(255, 102, 102, 0.05);
}

.site-blocked {
    border-left: 4px solid #ff6666 !important;
    background-color: rgba(255, 102, 102, 0.05) !important;
}

.site-card .link {
    display: inline-block;
    max-width: 100%;
    word-break: break-all;     
    overflow-wrap: anywhere;   
    white-space: normal;      
}

.site-card .muted {
    word-break: break-all;
    overflow-wrap: anywhere;
}