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

:root {
    --bg: #07101d;
    --panel: #0d1828;
    --panel-light: #111f32;
    --border: rgba(255,255,255,0.08);

    --text: #f5f7fb;
    --muted: #8d9bad;

    --blue: #38bdf8;
    --purple: #a78bfa;
    --green: #34d399;
    --orange: #f59e0b;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}


/* SIDEBAR */

.sidebar {
    position: fixed;
    left: 0;
    top: 0;

    width: 250px;
    height: 100vh;

    background: #081321;

    border-right: 1px solid var(--border);

    padding: 28px 18px;

    display: flex;
    flex-direction: column;
}


.logo {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0 10px 35px;
}

.logo-icon {
    width: 42px;
    height: 42px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #38bdf8,
        #8b5cf6
    );

    font-size: 22px;
}

.logo h2 {
    font-size: 19px;
}

.logo span {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--muted);
}


/* NAV */

nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-item {
    border: none;

    background: transparent;

    color: var(--muted);

    padding: 13px 14px;

    border-radius: 10px;

    text-align: left;

    font-size: 14px;

    cursor: pointer;

    display: flex;
    align-items: center;

    gap: 12px;
}

.nav-item:hover,
.nav-item.active {
    background: rgba(56,189,248,0.1);
    color: var(--blue);
}


/* SECURITY CARD */

.security-card {
    margin-top: auto;

    padding: 14px;

    border-radius: 12px;

    background: rgba(52,211,153,0.06);

    border: 1px solid rgba(52,211,153,0.15);

    display: flex;
    align-items: center;

    gap: 10px;
}

.security-icon {
    font-size: 20px;
}

.security-card strong {
    font-size: 11px;
}

.security-card p {
    font-size: 9px;
    color: var(--muted);
    margin-top: 3px;
}

.status-dot {
    width: 7px;
    height: 7px;

    background: var(--green);

    border-radius: 50%;

    margin-left: auto;
}


/* MAIN */

.main {
    margin-left: 250px;

    min-height: 100vh;

    padding: 0 50px;
}


/* TOPBAR */

.topbar {
    height: 100px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.welcome {
    color: var(--blue);

    font-size: 10px;

    letter-spacing: 2px;
}

.topbar h1 {
    margin-top: 5px;

    font-size: 27px;
}

.system-status {
    padding: 9px 15px;

    border-radius: 30px;

    background: rgba(52,211,153,0.08);

    border: 1px solid rgba(52,211,153,0.15);

    color: var(--green);

    font-size: 12px;
}

.online-dot,
.agent-status {
    display: inline-block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);

    margin-right: 7px;
}


/* HERO */

.hero {
    min-height: 370px;

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: 50px;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(56,189,248,0.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0c192b,
            #0b1524
        );

    display: flex;
    justify-content: space-between;

    overflow: hidden;
}

.hero-content {
    max-width: 650px;
}

.badge {
    display: inline-block;

    color: var(--green);

    font-size: 10px;

    letter-spacing: 2px;

    padding: 8px 12px;

    border-radius: 20px;

    background: rgba(52,211,153,0.07);

    border: 1px solid rgba(52,211,153,0.15);
}

.hero h2 {
    margin-top: 22px;

    font-size: 48px;

    line-height: 1.05;
}

.hero h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        var(--blue),
        var(--purple)
    );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.hero p {
    margin-top: 20px;

    color: var(--muted);

    line-height: 1.7;

    max-width: 600px;
}

.hero-buttons {
    margin-top: 28px;

    display: flex;

    gap: 12px;
}

.primary-btn,
.secondary-btn,
.upload-btn,
.run-btn {
    border: none;

    border-radius: 9px;

    padding: 13px 20px;

    cursor: pointer;

    font-weight: bold;
}

.primary-btn,
.run-btn {
    color: white;

    background: linear-gradient(
        90deg,
        #0284c7,
        #7c3aed
    );
}

.secondary-btn {
    color: var(--text);

    background: rgba(255,255,255,0.05);

    border: 1px solid var(--border);
}


/* HERO VISUAL */

.hero-visual {
    position: relative;

    width: 300px;
    height: 260px;
}

.ai-circle {
    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    top: 30px;
    left: 55px;

    background: radial-gradient(
        circle,
        rgba(56,189,248,0.3),
        rgba(139,92,246,0.08),
        transparent 70%
    );

    border: 1px solid rgba(56,189,248,0.25);

    display: flex;

    align-items: center;
    justify-content: center;
}

.inner-circle {
    width: 100px;
    height: 100px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #0ea5e9,
        #7c3aed
    );

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 25px;

    font-weight: bold;

    box-shadow: 0 0 50px rgba(56,189,248,0.35);
}

.floating-card {
    position: absolute;

    padding: 10px 14px;

    background: #101e30;

    border: 1px solid var(--border);

    border-radius: 9px;

    font-size: 12px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.card-one {
    top: 15px;
    right: 0;
}

.card-two {
    bottom: 30px;
    left: 0;
}

.card-three {
    bottom: 0;
    right: 20px;
}


/* STATS */

.stats {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 15px;

    margin-top: 18px;
}

.stat-card {
    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 13px;

    padding: 18px;

    display: flex;

    align-items: center;

    gap: 13px;
}

.stat-card p {
    font-size: 11px;

    color: var(--muted);
}

.stat-card h3 {
    margin-top: 5px;

    font-size: 22px;
}

.stat-icon {
    width: 40px;
    height: 40px;

    border-radius: 10px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.blue {
    background: rgba(56,189,248,0.1);
    color: var(--blue);
}

.purple {
    background: rgba(167,139,250,0.1);
    color: var(--purple);
}

.green {
    background: rgba(52,211,153,0.1);
    color: var(--green);
}

.orange {
    background: rgba(245,158,11,0.1);
    color: var(--orange);
}


/* SECTIONS */

.workspace,
.task-section,
.agents-section {
    margin-top: 60px;
}

.section-label {
    color: var(--blue);

    font-size: 9px;

    letter-spacing: 2px;
}

.section-heading h2 {
    margin-top: 7px;

    font-size: 25px;
}

.section-heading p {
    margin-top: 7px;

    color: var(--muted);

    font-size: 13px;
}


/* UPLOAD */

.upload-area {
    margin-top: 22px;

    padding: 45px;

    border-radius: 16px;

    border: 1px dashed rgba(56,189,248,0.3);

    background: rgba(56,189,248,0.025);

    text-align: center;
}

.upload-area.dragover {
    background: rgba(56,189,248,0.08);
}

.upload-icon {
    width: 55px;
    height: 55px;

    margin: auto;

    border-radius: 14px;

    background: rgba(56,189,248,0.1);

    color: var(--blue);

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 25px;
}

.upload-area h3 {
    margin-top: 15px;
}

.upload-area p {
    color: var(--muted);

    font-size: 12px;

    margin-top: 7px;
}

.upload-btn {
    display: inline-block;

    margin-top: 20px;

    background: rgba(56,189,248,0.1);

    color: var(--blue);

    border: 1px solid rgba(56,189,248,0.2);
}

.privacy-note {
    font-size: 10px !important;

    color: var(--green) !important;

    margin-top: 18px !important;
}


/* FILE LIST */

.file-list {
    margin-top: 15px;

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.file-item {
    padding: 13px 16px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 10px;

    display: flex;

    justify-content: space-between;

    font-size: 12px;
}

.file-success {
    color: var(--green);
}


/* TASK */

.task-box {
    margin-top: 22px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 15px;

    padding: 15px;
}

textarea {
    width: 100%;

    min-height: 120px;

    resize: vertical;

    border: none;

    outline: none;

    background: transparent;

    color: white;

    font-size: 14px;

    line-height: 1.6;
}

textarea::placeholder {
    color: #607085;
}

.task-bottom {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 12px;

    border-top: 1px solid var(--border);
}

.agent-info {
    color: var(--muted);

    font-size: 11px;
}


/* RESULT */

.result-box {
    margin-top: 15px;

    background: #091421;

    border: 1px solid var(--border);

    border-radius: 15px;

    padding: 20px;
}

.result-header {
    display: flex;

    justify-content: space-between;

    color: var(--muted);

    font-size: 10px;

    letter-spacing: 1px;
}

.result-status {
    color: var(--green);
}

#workflow {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 10px;

    margin-top: 18px;
}

.workflow-step {
    padding: 14px;

    border-radius: 10px;

    background: var(--panel);

    border: 1px solid var(--border);

    font-size: 11px;
}

.workflow-step span {
    color: var(--blue);

    margin-right: 6px;
}

.workflow-step small {
    display: block;

    margin-top: 7px;

    color: var(--muted);
}

.ai-output {
    margin-top: 15px;

    padding: 18px;

    min-height: 80px;

    border-radius: 10px;

    background: rgba(56,189,248,0.03);

    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;
}


/* AGENTS */

.agents-grid {
    display: grid;

    grid-template-columns: repeat(5,1fr);

    gap: 12px;

    margin-top: 22px;
}

.agent-card {
    padding: 20px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 13px;
}

.agent-card:hover {
    transform: translateY(-3px);

    border-color: rgba(56,189,248,0.25);

    transition: 0.2s;
}

.agent-card-icon {
    font-size: 25px;
}

.agent-card h3 {
    margin-top: 15px;

    font-size: 14px;
}

.agent-card p {
    margin-top: 8px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.5;
}


/* FOOTER */

footer {
    margin-top: 80px;

    padding: 25px 0;

    border-top: 1px solid var(--border);

    display: flex;

    justify-content: space-between;

    color: var(--muted);

    font-size: 10px;
}


/* RESPONSIVE */

@media(max-width:1000px) {

    .sidebar {
        width: 200px;
    }

    .main {
        margin-left: 200px;

        padding: 0 25px;
    }

    .hero h2 {
        font-size: 38px;
    }

    .hero-visual {
        display: none;
    }

    .agents-grid {
        grid-template-columns: repeat(2,1fr);
    }

}

@media(max-width:700px) {

    .sidebar {
        display: none;
    }

    .main {
        margin-left: 0;

        padding: 0 15px;
    }

    .stats {
        grid-template-columns: repeat(2,1fr);
    }

    #workflow {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 30px;
    }

    .hero h2 {
        font-size: 32px;
    }

}
/* ============================================================
   SECUREAI - SENSITIVE DATA MASKING UI
   FINAL UI POLISH
   DO NOT REMOVE EXISTING STYLES
   ============================================================ */


/* ------------------------------------------------------------
   PRIVACY STAT CARD GRID
   ------------------------------------------------------------ */

.privacy-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    width: 100%;

    margin-top: 18px;

    align-items: stretch;
}


/* ------------------------------------------------------------
   PRIVACY STAT CARD
   ------------------------------------------------------------ */

.privacy-stat {
    min-width: 0;

    padding: 16px;

    border-radius: 12px;

    overflow: hidden;

    box-sizing: border-box;
}


/* ------------------------------------------------------------
   STAT LABEL
   ------------------------------------------------------------ */

.privacy-stat > span {
    display: block;

    margin-bottom: 8px;

    font-size: 0.78rem;

    line-height: 1.2;

    opacity: 0.7;

    white-space: nowrap;
}


/* ------------------------------------------------------------
   STAT VALUE
   ------------------------------------------------------------ */

.privacy-stat > strong {
    display: block;

    width: 100%;

    min-width: 0;

    font-size: 1rem;

    line-height: 1.25;

    font-weight: 700;

    overflow-wrap: anywhere;

    word-break: break-word;
}


/* ------------------------------------------------------------
   LONG FILE NAMES
   ------------------------------------------------------------ */

.privacy-stat:first-child > strong,
.privacy-stat:nth-child(2) > strong {
    font-size: 0.9rem;

    line-height: 1.25;

    overflow-wrap: anywhere;

    word-break: break-word;
}


/* ------------------------------------------------------------
   RISK
   ------------------------------------------------------------ */

.privacy-stat .risk-high,
.privacy-stat .risk-medium,
.privacy-stat .risk-low {
    font-size: 1rem;

    font-weight: 700;

    white-space: nowrap;
}


/* ------------------------------------------------------------
   DETECTED INFORMATION
   ------------------------------------------------------------ */

.privacy-result .privacy-stat-grid + div {
    min-width: 0;
}


/* ------------------------------------------------------------
   DETECTED INFORMATION CARDS
   ------------------------------------------------------------ */

.privacy-result [style*="border-left: 3px solid #ef4444"] {
    overflow-wrap: anywhere;

    word-break: break-word;
}


/* ------------------------------------------------------------
   REDACTION RESULT
   ------------------------------------------------------------ */

#redactionResult .privacy-stat-grid {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/* ------------------------------------------------------------
   PROTECTED FILE NAME
   ------------------------------------------------------------ */

#redactionResult .privacy-stat:nth-child(2) strong {
    font-size: 0.9rem;

    overflow-wrap: anywhere;

    word-break: break-word;
}


/* ------------------------------------------------------------
   DOWNLOAD AREA
   ------------------------------------------------------------ */

#downloadContainer {
    margin-top: 15px;

    width: 100%;
}


/* ------------------------------------------------------------
   DOWNLOAD BUTTON
   ------------------------------------------------------------ */

#downloadContainer .download-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 11px 17px;

    border-radius: 9px;

    text-decoration: none;

    font-weight: 600;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


#downloadContainer .download-link:hover {
    transform: translateY(-1px);

    opacity: 0.9;
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width: 1000px) {

    .privacy-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    #redactionResult .privacy-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    .privacy-stat-grid {
        grid-template-columns:
            1fr;

        gap: 10px;
    }

    #redactionResult .privacy-stat-grid {
        grid-template-columns:
            1fr;
    }

    .privacy-stat {
        padding: 13px;
    }

    .privacy-stat > strong {
        font-size: 0.95rem;
    }

    .privacy-stat:first-child > strong,
    .privacy-stat:nth-child(2) > strong {
        font-size: 0.85rem;
    }
}