:root {
    --bg-primary:     #0a0a0f;
    --bg-secondary:   #12121a;
    --bg-card:        rgba(18, 18, 26, 0.88);
    --neon-blue:      #00f0ff;
    --neon-purple:    #b44aff;
    --neon-green:     #00ff88;
    --neon-yellow:    #ffcc00;
    --text-primary:   #e0e0e0;
    --text-secondary: #8888a0;
    --border-glow:    rgba(0, 240, 255, 0.28);
    --font-main:      'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:      'Consolas', 'Courier New', monospace;
    --t-fast: 0.2s ease;
    --t-med:  0.4s ease;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-main); background-color: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; }

.grid-bg {
    position: fixed; inset: 0;
    background-image: linear-gradient(rgba(0,240,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(0,240,255,.03) 1px,transparent 1px);
    background-size: 50px 50px; z-index: 0; animation: gridMove 20s linear infinite; pointer-events: none;
}
@keyframes gridMove { 0% { transform: translate(0,0); } 100% { transform: translate(50px,50px); } }

.page-wrapper { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 2rem 1.25rem 4rem; min-height: 100vh; }
.upload-panel { width: 100%; max-width: 600px; }

.header { text-align: center; margin-bottom: 2.5rem; }
.title { font-size: clamp(1.5rem,5vw,2.4rem); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; }
.title-glow { color: var(--neon-blue); text-shadow: 0 0 10px var(--neon-blue),0 0 24px var(--neon-blue); animation: pulseGlow 2.5s ease-in-out infinite alternate; }
.title-sep { color: var(--text-secondary); }
@keyframes pulseGlow {
    0%   { text-shadow: 0 0  8px var(--neon-blue),0 0 18px var(--neon-blue); }
    100% { text-shadow: 0 0 16px var(--neon-blue),0 0 36px var(--neon-blue),0 0 60px rgba(0,240,255,.5); }
}
.subtitle { color: var(--text-secondary); font-size: .95rem; margin-top: .5rem; letter-spacing: .04em; }

.upload-section { display: flex; flex-direction: column; gap: 1.25rem; }

.upload-zone {
    background: var(--bg-card); border: 2px dashed var(--border-glow); border-radius: 16px;
    padding: 3rem 2rem; text-align: center; cursor: pointer;
    transition: border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
    position: relative; overflow: hidden; backdrop-filter: blur(10px);
}
.upload-zone:hover { border-color: var(--neon-blue); background: rgba(0,240,255,.05); box-shadow: 0 0 22px rgba(0,240,255,.15),inset 0 0 22px rgba(0,240,255,.05); }
.upload-zone.drag-over { border-color: var(--neon-green); background: rgba(0,255,136,.08); box-shadow: 0 0 32px rgba(0,255,136,.25),inset 0 0 32px rgba(0,255,136,.1); transform: scale(1.015); }
.upload-zone.error  { border-color: #ff4466; background: rgba(255,68,102,.08); box-shadow: 0 0 20px rgba(255,68,102,.22); }
.upload-zone.success{ border-color: var(--neon-green); background: rgba(0,255,136,.06); box-shadow: 0 0 20px rgba(0,255,136,.2); }

.upload-zone::before,.upload-zone::after { content:''; position:absolute; width:28px; height:28px; border:2px solid var(--neon-blue); opacity:0; transition:opacity var(--t-fast); }
.upload-zone::before { top:10px;    left:10px;   border-right:none; border-bottom:none; }
.upload-zone::after  { bottom:10px; right:10px;  border-left:none;  border-top:none; }
.upload-zone:hover::before,.upload-zone:hover::after,
.upload-zone.drag-over::before,.upload-zone.drag-over::after { opacity:1; }

.upload-icon { margin-bottom:1.4rem; color:var(--neon-blue); transition:transform var(--t-med),color var(--t-fast); }
.upload-icon svg { width:60px; height:60px; margin:auto; }
.upload-zone:hover     .upload-icon { transform:translateY(-5px); color:var(--neon-purple); }
.upload-zone.drag-over .upload-icon { transform:scale(1.1); color:var(--neon-green); animation:bounce .5s ease infinite alternate; }
@keyframes bounce { 0% { transform:scale(1.1) translateY(0); } 100% { transform:scale(1.1) translateY(-8px); } }

.upload-text { color:var(--text-secondary); font-size:1rem; margin-bottom:1rem; }
.file-input  { display:none; }
.upload-btn {
    display:inline-block; padding:.65rem 1.8rem; background:transparent;
    border:1px solid var(--neon-blue); border-radius:8px; color:var(--neon-blue);
    font-family:var(--font-mono); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
    cursor:pointer; transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
    position:relative; overflow:hidden;
}
.upload-btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(0,240,255,.2),transparent); transition:left .5s ease; }
.upload-btn:hover { background:var(--neon-blue); color:var(--bg-primary); box-shadow:0 0 20px rgba(0,240,255,.4); transform:translateY(-2px); }
.upload-btn:hover::before { left:100%; }
.upload-btn:active { transform:translateY(0); }

.upload-hint { color:var(--text-secondary); font-size:.78rem; margin-top:.9rem; font-family:var(--font-mono); }
.file-name { color:var(--neon-green); font-family:var(--font-mono); font-size:.82rem; margin-top:.9rem; min-height:1.2em; opacity:0; transition:opacity var(--t-fast); word-break:break-all; }
.file-name.visible { opacity:1; }

.status-bar { display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem; background:var(--bg-card); border-radius:8px; border:1px solid rgba(255,255,255,.05); backdrop-filter:blur(10px); }
.status-indicator { width:10px; height:10px; border-radius:50%; background:var(--text-secondary); box-shadow:0 0 5px var(--text-secondary); flex-shrink:0; transition:background var(--t-fast),box-shadow var(--t-fast); }
.status-bar.active  .status-indicator { background:var(--neon-blue);  box-shadow:0 0 10px var(--neon-blue);  animation:blink 1s ease-in-out infinite; }
.status-bar.success .status-indicator { background:var(--neon-green); box-shadow:0 0 10px var(--neon-green); }
.status-bar.error   .status-indicator { background:#ff4466;           box-shadow:0 0 10px #ff4466; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.status-text { color:var(--text-secondary); font-size:.83rem; font-family:var(--font-mono); flex:1; }
.spinner { display:none; width:18px; height:18px; border:2px solid transparent; border-top-color:var(--neon-blue); border-radius:50%; animation:spin .8s linear infinite; flex-shrink:0; }
.status-bar.active .spinner { display:block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Result section ──────────────────────────────────── */
.result-section { display:none; width:100%; max-width:1200px; margin-top:2.5rem; animation:fadeInUp .35s ease both; }
.result-section.visible { display:block; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

.result-header { display:flex; align-items:center; gap:1rem; margin-bottom:.9rem; padding:0 .25rem; }
.result-title { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; color:var(--neon-blue); text-transform:uppercase; text-shadow:0 0 8px rgba(0,240,255,.4); }
.result-meta  { font-family:var(--font-mono); font-size:.76rem; color:var(--text-secondary); }
.clear-btn { margin-left:auto; background:transparent; border:1px solid rgba(255,68,102,.4); border-radius:6px; color:#ff4466; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; padding:.28rem .8rem; cursor:pointer; transition:background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast); }
.clear-btn:hover { background:rgba(255,68,102,.12); box-shadow:0 0 10px rgba(255,68,102,.25); transform:translateY(-1px); }
.clear-btn:active { transform:translateY(0); }

.result-table-wrapper { background:var(--bg-card); border-radius:12px; border:1px solid rgba(255,255,255,.06); overflow:hidden; backdrop-filter:blur(10px); max-height:520px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(0,240,255,.3) transparent; }
.result-table-wrapper::-webkit-scrollbar { width:6px; }
.result-table-wrapper::-webkit-scrollbar-thumb { background:rgba(0,240,255,.3); border-radius:3px; }

.result-table { width:100%; border-collapse:collapse; font-size:.875rem; table-layout:fixed; }
.result-table thead { background:rgba(0,240,255,.07); position:sticky; top:0; z-index:10; }
.result-table th { padding:.85rem 1rem; text-align:left; font-family:var(--font-mono); font-weight:600; color:var(--neon-blue); text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; border-bottom:1px solid var(--border-glow); white-space:nowrap; }

.col-num    { width:56px;  text-align:center; }
.col-name   { width:34%; }
.col-url    { width:auto; }
.col-status { width:120px; text-align:center; }

.result-table td { padding:.8rem 1rem; border-bottom:1px solid rgba(255,255,255,.03); color:var(--text-primary); vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-table td.col-name   { white-space:normal; word-break:break-word; }
.result-table td.col-num    { text-align:center; color:var(--text-secondary); font-family:var(--font-mono); font-size:.8rem; }
.result-table td.col-status { text-align:center; }

.result-table tbody tr { transition:background var(--t-fast); }
.result-table tbody tr:hover { background:rgba(0,240,255,.045); }
.result-table tbody tr:nth-child(even) { background:rgba(255,255,255,.018); }
.result-table tbody tr:nth-child(even):hover { background:rgba(0,240,255,.045); }

.result-table td a { color:var(--neon-purple); text-decoration:none; font-size:.8rem; display:block; overflow:hidden; text-overflow:ellipsis; transition:color var(--t-fast),text-shadow var(--t-fast); }
.result-table td a:hover { color:var(--neon-blue); text-shadow:0 0 8px var(--neon-blue); }

.status-badge { display:inline-block; padding:.22rem .6rem; border-radius:4px; font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.status-queued     { background:rgba(255,200,0,.14);  color:var(--neon-yellow); border:1px solid rgba(255,200,0,.3); }
.status-processing { background:rgba(0,240,255,.14);  color:var(--neon-blue);   border:1px solid rgba(0,240,255,.3); }
.status-completed  { background:rgba(0,255,136,.14);  color:var(--neon-green);  border:1px solid rgba(0,255,136,.3); }
.status-error      { background:rgba(255,68,102,.14); color:#ff4466;            border:1px solid rgba(255,68,102,.3); }

@media (max-width:768px) {
    .page-wrapper { padding:1.25rem .75rem 3rem; }
    .upload-zone { padding:2rem 1.25rem; }
    .upload-icon svg { width:48px; height:48px; }
    .title { font-size:1.4rem; }
    .result-table { font-size:.8rem; }
    .col-status { width:100px; }
    .col-num { width:44px; }
}
@media (max-width:480px) {
    .result-table-wrapper { max-height:380px; }
    .result-table th,.result-table td { padding:.6rem .55rem; }
}
/* ── Кнопка «Запустить проверку» ──────────────────────── */
.run-btn {
    background: transparent;
    border: 1px solid var(--neon-green);
    border-radius: 6px;
    color: var(--neon-green);
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .06em;
    padding: .28rem .9rem;
    cursor: pointer;
    transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.run-btn:hover:not(:disabled) {
    background: rgba(0,255,136,.12);
    box-shadow: 0 0 12px rgba(0,255,136,.3);
    transform: translateY(-1px);
}
.run-btn:active:not(:disabled) { transform: translateY(0); }
.run-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

/* ── Новые статус-бейджи ────────────────────────────────── */
.status-suitable {
    background: rgba(0,255,136,.14);
    color: var(--neon-green);
    border: 1px solid rgba(0,255,136,.4);
    font-weight: 600;
}
.status-not-suitable {
    background: rgba(120,120,140,.14);
    color: #888899;
    border: 1px solid rgba(120,120,140,.3);
}

/* ── Колонка «Комментарий» ──────────────────────────────── */
.col-comment { width: 28%; }
.result-table td.col-comment {
    white-space: normal;
    word-break: break-word;
    font-size: .8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Подсветка строки при получении результата */
@keyframes rowHighlight {
    0%   { background: rgba(0,255,136,.12); }
    100% { background: transparent; }
}
.result-table tbody tr.highlight {
    animation: rowHighlight .8s ease forwards;
}