@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Chakra Petch', sans-serif;
    background: #f0f0ee;
    color: #3a3a38;
    line-height: 1.5;
    font-size: 14px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Top accent line */
.accent-top {
    height: 3px;
    background: linear-gradient(90deg, #e8e8e6 20%, #c0382a 20%, #c0382a 40%, #e8e8e6 40%, #e8e8e6 60%, #2a2a28 60%, #2a2a28 80%, #e8e8e6 80%);
}

/* Header */
header {
    background: #2a2a28;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
}

.logo {
    font-size: 20px;
    font-weight: 700;
    color: #f0f0ee;
    text-decoration: none;
    letter-spacing: 6px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.logo-img {
    height: 26px;
    width: auto;
    margin-right: 8px;
}

.header-sys {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: #908e8c;
    letter-spacing: 2px;
}

/* Main content */
main {
    flex: 1;
    max-width: 980px;
    margin: 0 auto;
    width: 100%;
}

/* Footer strip */
.accent-bottom {
    height: 3px;
    background: linear-gradient(90deg, #e8e8e6 20%, #2a2a28 20%, #2a2a28 40%, #e8e8e6 40%, #e8e8e6 60%, #c0382a 60%, #c0382a 80%, #e8e8e6 80%);
}

/* ===== HOMEPAGE ===== */
main.home-main {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero {
    text-align: center;
    max-width: 680px;
    width: 100%;
    padding: 0 32px;
}

.hero-logo img {
    height: 150px;
    width: auto;
    margin-bottom: 24px;
}

.hero h1 {
    font-size: 42px;
    font-weight: 700;
    color: #2a2a28;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.hero .tagline {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: #aaa;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.search-form {
    display: flex;
    border: 2px solid #2a2a28;
    background: #fff;
}

.search-input {
    flex: 1;
    padding: 16px 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: #2a2a28;
    border: none;
    background: none;
    outline: none;
}

.search-input::placeholder { color: #c0c0be; }

.search-btn {
    padding: 16px 32px;
    background: #c0382a;
    color: #fff;
    border: none;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
}
.search-btn:hover { background: #a02a1a; }

.search-options {
    margin-top: 12px;
    text-align: left;
}

.search-toggle {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.search-toggle input[type="checkbox"] {
    accent-color: #c0382a;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.search-message {
    margin-top: 16px;
    padding: 14px 18px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    text-align: left;
}

.search-message-error {
    background: #fff;
    border: 1px solid #d8d8d6;
    border-left: 4px solid #c0382a;
    color: #c0382a;
}

.search-message-notfound {
    background: #fff;
    border: 1px solid #d8d8d6;
    border-left: 4px solid #d09030;
    color: #6a5a3a;
}

.search-message-notfound p {
    margin-bottom: 10px;
}

.analyze-now-btn {
    padding: 6px 20px;
    background: #c0382a;
    color: #fff;
    border: none;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
}
.analyze-now-btn:hover { background: #a02a1a; }

.search-hint {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: #bbb;
    margin-top: 12px;
    text-align: left;
}

/* Stats bar */
.stats-bar {
    background: #2a2a28;
    display: flex;
    justify-content: center;
}

.stat-item {
    padding: 12px 32px;
    text-align: center;
    border-right: 1px solid #3a3a38;
}
.stat-item:last-child { border-right: none; }

.stat-item .num {
    font-size: 18px;
    font-weight: 700;
    color: #f0f0ee;
}

.stat-item .label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #908e8c;
}

/* ===== STATUS / WAITING PAGE ===== */
main.status-main {
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-card {
    max-width: 620px;
    width: 100%;
    padding: 0 32px;
}

.target-box {
    background: #fff;
    border: 1px solid #d8d8d6;
    border-left: 4px solid #c0382a;
    padding: 16px 20px;
    margin-bottom: 32px;
}

.target-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #bbb;
    margin-bottom: 4px;
}

.target-url {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: #2a2a28;
    word-break: break-all;
}

.progress-section {
    text-align: center;
    margin-bottom: 32px;
}

.spinner-wrap { margin-bottom: 24px; }

.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid #e0e0de;
    border-top: 3px solid #c0382a;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin { to { transform: rotate(360deg); } }

.status-text {
    font-size: 18px;
    font-weight: 700;
    color: #2a2a28;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 6px;
}

.status-sub {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: #aaa;
}

.error-text {
    color: #c0382a;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    margin-top: 12px;
}

.submit-info {
    margin-top: 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: #bbb;
    display: flex;
    justify-content: space-between;
}

/* ===== ERROR PAGE ===== */
.error-box {
    text-align: center;
    padding: 80px 32px;
}

.error-box h2 {
    font-size: 24px;
    font-weight: 700;
    color: #c0382a;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.error-box p {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
}

.error-box a {
    color: #c0382a;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
}
.error-box a:hover { color: #a02a1a; }

/* ===== RESULTS PAGE ===== */

/* Hero section */
.result-hero {
    background: #fff;
    padding: 40px 44px;
    border-bottom: 1px solid #d8d8d6;
    position: relative;
}
.result-hero::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #c0382a;
}

.result-hero-tag {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: #aaa;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.result-hero h1 {
    font-size: 36px;
    font-weight: 700;
    color: #2a2a28;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.truncate-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    cursor: default;
}

.result-hero .url {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: #aaa;
    word-break: break-all;
}

/* Verdict strip */
.verdict-strip {
    display: flex;
    background: #2a2a28;
}

.verdict-cell {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    border-right: 1px solid #3a3a38;
}
.verdict-cell:last-child { border-right: none; }

.verdict-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #908e8c;
}

.verdict-val {
    font-size: 17px;
    font-weight: 700;
    color: #f0f0ee;
}
.verdict-val.online { color: #5ab87a; }
.verdict-val.offline { color: #c0382a; }

/* Redirect notice */
.redirect-notice {
    background: #fff;
    border: 1px solid #d8d8d6;
    border-left: 4px solid #d09030;
    padding: 10px 16px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: #6a5a3a;
}
.redirect-url {
    color: #2a2a28;
    word-break: break-all;
}

/* Tab navigation */
.tab-nav {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-bottom: 1px solid #d8d8d6;
}

.tab-btn {
    padding: 14px 28px;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #aaa;
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.tab-btn:hover { color: #666; }
.tab-btn.active { color: #2a2a28; border-bottom-color: #c0382a; }

.tab-content { display: none; }
.tab-content.active { display: block; }

.tab-panel {
    background: #fff;
    padding: 32px 44px;
    border-bottom: 1px solid #d8d8d6;
}

/* Section title */
.sec-title {
    font-size: 11px;
    font-weight: 700;
    color: #2a2a28;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8e8e6;
    position: relative;
}
.sec-title::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 40px;
    height: 1px;
    background: #c0382a;
}
.sec-title .count {
    font-weight: 400;
    color: #bbb;
    float: right;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

.sub-section { margin-bottom: 32px; }
.sub-section:last-child { margin-bottom: 0; }

/* Screenshot */
.ss-frame {
    border: 1px solid #d8d8d6;
}
.ss-frame img { width: 100%; display: block; }
.ss-info {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: #bbb;
}

/* Data table */
.data-table { width: 100%; border-collapse: collapse; }
.data-table td {
    padding: 9px 0;
    border-bottom: 1px solid #ececea;
    font-size: 13px;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .k {
    width: 200px;
    color: #888;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.data-table .v {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: #4a4a48;
    word-break: break-all;
}

/* Tech tags */
.tech-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tech-tag {
    padding: 6px 18px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 3px solid;
    background: #f6f6f4;
}
.tech-tag.web-server { border-color: #5ab87a; color: #3a8a4a; }
.tech-tag.language { border-color: #d09030; color: #a06820; }
.tech-tag.framework { border-color: #c0382a; color: #a02a1a; }
.tech-tag.cms { border-color: #3080c0; color: #2060a0; }
.tech-tag.javascript { border-color: #c0a030; color: #8a7020; }
.tech-tag.cdn-waf { border-color: #8060c0; color: #6040a0; }
.tech-tag.crypto { border-color: #c03030; color: #a02020; background: #fff0f0; }
.tech-tag.analytics { border-color: #60a0a0; color: #408080; }

/* Links */
.link-section { margin-bottom: 22px; }
.link-section:last-child { margin-bottom: 0; }
.link-cat {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    color: #bbb;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ececea;
}
.link-cat.onion { color: #5ab87a; border-color: #c0e0cc; }
.link-entry {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #f2f2f0;
    color: #888;
    word-break: break-all;
}
.link-entry:last-child { border-bottom: none; }
.link-entry.onion { color: #3a8a4a; }

/* Favicon */
.fav-block {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.fav-icon {
    width: 52px; height: 52px;
    border: 1px solid #d8d8d6;
    background: #f6f6f4;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.fav-icon img { width: 32px; height: 32px; image-rendering: pixelated; }
.fav-info { font-size: 12px; }
.fav-info .lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: #bbb; font-weight: 600; }
.fav-info code { font-family: 'Share Tech Mono', monospace; color: #4a4a48; font-size: 12px; }
.fav-info div { margin-bottom: 4px; }
.shodan-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 16px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    background: #c0382a;
}
.shodan-btn:hover { background: #a02a1a; }

/* Code block */
.code-block {
    background: #2a2a28;
    padding: 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    line-height: 1.8;
    color: #a0a09e;
    max-height: 440px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

.code-block code.hljs {
    background: #2a2a28;
    padding: 0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    line-height: 1.8;
}

/* History table */
.hist-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #ececea;
    gap: 16px;
}
.hist-row:last-child { border-bottom: none; }
.h-dot { width: 8px; height: 8px; }
.h-dot.on { background: #5ab87a; }
.h-dot.off { background: #c0382a; }
.h-id { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: #bbb; width: 28px; }
.h-date { color: #666; flex: 1; }
.h-dup { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: #d09030; width: 80px; }
.h-action a { color: #c0382a; text-decoration: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }
.h-action a:hover { color: #a02a1a; }

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 16px 0 4px;
    margin-top: 16px;
    border-top: 1px solid #ececea;
}

.page-link {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: #c0382a;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.page-link:hover { color: #a02a1a; }

.page-info {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: #aaa;
}

/* Back link */
.back-link {
    display: inline-block;
    margin-bottom: 16px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: #c0382a;
    text-decoration: none;
}
.back-link:hover { color: #a02a1a; }

/* No data message */
.no-data {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: #bbb;
    padding: 20px 0;
}

@media (max-width: 768px) {
    /* Header */
    header { padding: 0 16px; height: 48px; }
    .logo { font-size: 16px; letter-spacing: 4px; }
    .logo-img { height: 22px; }
    .header-sys { font-size: 8px; letter-spacing: 1px; }

    /* Main content */
    main { padding: 16px; }

    /* Homepage */
    .hero { padding: 0 16px; }
    .hero h1 { font-size: 28px; letter-spacing: 2px; }
    .hero .tagline { font-size: 11px; letter-spacing: 2px; margin-bottom: 28px; }
    .hero-logo img { height: 100px; }
    .search-form { flex-direction: column; }
    .search-input { padding: 14px 16px; font-size: 13px; }
    .search-btn { padding: 14px; }
    .search-hint { font-size: 10px; }
    .search-options { font-size: 11px; }

    /* Stats bar */
    .stats-bar { flex-wrap: wrap; }
    .stat-item { min-width: 33%; padding: 10px 16px; }
    .stat-item .num { font-size: 16px; }
    .stat-item .label { font-size: 8px; }

    /* Status page */
    .status-card { padding: 0 16px; }
    .target-box { padding: 12px 16px; }
    .target-url { font-size: 11px; }
    .status-text { font-size: 16px; letter-spacing: 2px; }
    .submit-info { flex-direction: column; gap: 4px; font-size: 10px; }

    /* Result hero */
    .result-hero { padding: 20px; }
    .result-hero-tag { font-size: 9px; letter-spacing: 3px; }
    .result-hero h1 { font-size: 22px; }
    .result-hero .url { font-size: 10px; }

    /* Verdict strip */
    .verdict-strip { flex-wrap: wrap; }
    .verdict-cell { min-width: 33%; padding: 10px 12px; }
    .verdict-label { font-size: 8px; }
    .verdict-val { font-size: 14px; }

    /* Redirect notice */
    .redirect-notice { font-size: 11px; padding: 8px 12px; }

    /* Tabs — stack on mobile */
    .tab-btn { padding: 10px 14px; font-size: 10px; letter-spacing: 1px; flex: 1; text-align: center; }

    /* Tab panels */
    .tab-panel { padding: 16px; }
    .sub-section { margin-bottom: 24px; }

    /* Section titles */
    .sec-title { font-size: 10px; letter-spacing: 2px; }
    .sec-title .count { font-size: 10px; }

    /* Screenshot */
    .ss-frame img { width: 100%; }

    /* Data tables */
    .data-table .k { width: 120px; font-size: 11px; }
    .data-table .v { font-size: 11px; }

    /* Tech tags */
    .tech-row { gap: 6px; }
    .tech-tag { padding: 5px 12px; font-size: 11px; }

    /* Links */
    .link-cat { font-size: 9px; }
    .link-entry { font-size: 11px; padding: 5px 0; }

    /* Favicon */
    .fav-block { flex-direction: column; gap: 12px; }
    .fav-icon { width: 44px; height: 44px; }
    .fav-info { font-size: 11px; }
    .fav-info code { font-size: 10px; word-break: break-all; }
    .shodan-btn { font-size: 10px; padding: 4px 12px; }

    /* Code blocks */
    .code-block { padding: 12px; font-size: 11px; max-height: 300px; }

    /* History */
    .hist-row { padding: 10px 0; gap: 8px; font-size: 12px; }
    .h-id { font-size: 11px; }
    .h-date { font-size: 11px; }
    .h-dup { font-size: 10px; width: 60px; }
    .h-action a { font-size: 10px; letter-spacing: 1px; }

    /* Pagination */
    .pagination { gap: 12px; }
    .page-link { font-size: 11px; }
    .page-info { font-size: 11px; }

    /* Back link in snapshot tab bar */
    .back-link { font-size: 11px !important; padding: 12px 14px !important; }

    /* Error page */
    .error-box { padding: 40px 16px; }
    .error-box h2 { font-size: 20px; }
}

@media (max-width: 480px) {
    /* Extra small screens */
    .hero h1 { font-size: 24px; }
    .hero-logo img { height: 80px; }
    .result-hero h1 { font-size: 18px; }
    .verdict-cell { min-width: 50%; }
    .stat-item { min-width: 50%; }
    .data-table .k { width: 100px; font-size: 10px; }
    .data-table .v { font-size: 10px; }
    .tab-btn { padding: 8px 8px; font-size: 9px; letter-spacing: 0px; }
    .header-sys { display: none; }
}