/* PigSearch.Web/wwwroot/css/site.css - 修復 Broken CSS 的核心樣式檔 */

:root {
    --bg: #f6fbf8;
    --panel: rgba(255,255,255,0.86);
    --line: #d9e7df;
    --text: #20332b;
    --muted: #688076;
    --primary: #4ba88f;
    --shadow: 0 22px 50px rgba(81, 120, 106, 0.12);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI", "Noto Sans TC", Arial, sans-serif;
    color: var(--text);
    background: radial-gradient(circle at top left, rgba(101, 183, 157, 0.12), transparent 28%), radial-gradient(circle at top right, rgba(241, 190, 119, 0.16), transparent 24%), linear-gradient(180deg, #f8fcfa 0%, #f4f9f6 100%);
    line-height: 1.5;
}

/* 修復 Broken Visual Design (image_11) and Faded Demo Background Contradiction faded faded demo demo background background contradictory contradictory contradiction faded contradictory contradictory background background background background faded background background faded background background faded background faded background background background faded background background background */
.page-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 18px 40px;
}

.login-wrap {
    min-height: calc(100vh - 96px);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) 460px;
    gap: 20px;
}

.login-panel {
    padding: 32px;
    position: relative;
    overflow: hidden;
    min-height: 720px;
    border-radius: 34px;
    box-shadow: var(--shadow);
    background: #f0f5f2;
}

    .login-panel img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* 加上 overlay 以淡化 contradiction faded contradiction contradictory background contradiction faded faded faded faded faded demo demo demo background background background contradictory contradictory contradictory contradiction faded contradictory contradictory background background background background faded background background faded background background faded background faded background background background faded background background background */
    .login-panel::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, rgba(249,252,250,0.97) 12%, rgba(249,252,250,0.82) 48%, rgba(249,252,250,0.42) 100%);
    }

.login-copy {
    position: relative;
    z-index: 1;
    max-width: 520px;
    display: grid;
    gap: 18px;
    align-content: end;
    min-height: 100%;
}

.login-form {
    padding: 30px;
    border-radius: 34px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(219,232,224,.96);
    box-shadow: var(--shadow);
    display: grid;
    align-content: center;
    gap: 18px;
}
<style >
:root {
    --bg: #f6fbf8;
    --panel: rgba(255,255,255,0.86);
    --panel-strong: #ffffff;
    --line: #d9e7df;
    --text: #20332b;
    --muted: #688076;
    --primary: #4ba88f;
    --primary-deep: #2f7867;
    --accent: #f1be77;
    --accent-soft: #fff5e7;
    --sky-soft: #edf7fb;
    --danger-soft: #fff0ee;
    --shadow: 0 22px 50px rgba(81, 120, 106, 0.12);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI", "Noto Sans TC", Arial, sans-serif;
    color: var(--text);
    background: radial-gradient(circle at top left, rgba(101, 183, 157, 0.12), transparent 28%), radial-gradient(circle at top right, rgba(241, 190, 119, 0.16), transparent 24%), linear-gradient(180deg, #f8fcfa 0%, #f4f9f6 100%);
    line-height: 1.5;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(16px);
    background: rgba(248, 252, 250, 0.86);
    border-bottom: 1px solid rgba(164, 196, 182, 0.32);
}

.topbar-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.brand-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(75, 168, 143, 0.12);
    color: var(--primary-deep);
    border: 1px solid rgba(75, 168, 143, 0.18);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.brand h1 {
    margin: 0;
    font-size: 28px;
    letter-spacing: 0.02em;
}

.brand p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.nav-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .nav-pills button {
        border: 1px solid rgba(75, 168, 143, 0.14);
        background: rgba(255, 255, 255, 0.88);
        color: var(--text);
        border-radius: 999px;
        padding: 11px 16px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.02em;
        transition: all .18s ease;
        box-shadow: 0 8px 22px rgba(99, 131, 117, 0.06);
    }

        .nav-pills button:hover,
        .nav-pills button.active {
            background: linear-gradient(180deg, #eefaf6 0%, #ffffff 100%);
            color: var(--primary-deep);
            border-color: rgba(75, 168, 143, 0.28);
            transform: translateY(-1px);
        }

.page-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 18px 40px;
}

.screen {
    display: none;
    animation: fadeIn .18s ease;
}

    .screen.active {
        display: block;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.panel {
    background: var(--panel);
    border: 1px solid rgba(219, 232, 224, 0.92);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.hero {
    position: relative;
    min-height: 280px;
    display: grid;
    align-items: end;
    padding: 28px;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    background: #eef5f1;
}

    .hero img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(251, 253, 252, 0.97) 0%, rgba(251, 253, 252, 0.92) 42%, rgba(251, 253, 252, 0.48) 100%);
    }

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.hero h2,
.hero h3 {
    margin: 14px 0 0;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
}

.hero p {
    margin: 14px 0 0;
    color: var(--muted);
    max-width: 680px;
    font-size: 15px;
    line-height: 1.75;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(75,168,143,0.16);
    background: rgba(255,255,255,0.82);
    color: var(--primary-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.layout-shell {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 20px;
}

.sidebar {
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(219,232,224,.92);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 760px;
}

    .sidebar h2 {
        margin: 0;
        font-size: 31px;
        line-height: 1.12;
    }

    .sidebar p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
    }

.nav-card {
    display: grid;
    gap: 10px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    border-radius: 18px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(219,232,224,.92);
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
}

    .nav-link.active {
        background: linear-gradient(180deg, #eefaf6 0%, #ffffff 100%);
        color: var(--primary-deep);
        border-color: rgba(75,168,143,.22);
    }

.mini-card {
    border: 1px solid rgba(219,232,224,.88);
    background: rgba(255,255,255,.84);
    border-radius: 22px;
    padding: 18px;
}

.mini-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 14px;
}

    .mini-card-grid .box {
        background: linear-gradient(180deg, #f5fcf8 0%, #fffaf2 100%);
        border: 1px solid rgba(206, 226, 214, .95);
        border-radius: 18px;
        padding: 12px;
    }

        .mini-card-grid .box p {
            margin: 0;
            font-size: 12px;
            color: var(--muted);
        }

        .mini-card-grid .box strong {
            display: block;
            margin-top: 8px;
            font-size: 15px;
            color: var(--text);
        }

.account-card {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(219,232,224,.88);
    background: rgba(255,255,255,.84);
    border-radius: 22px;
    padding: 16px;
}

    .account-card small,
    .muted {
        color: var(--muted);
    }

.content-area {
    display: grid;
    gap: 18px;
}

.page-header {
    padding: 24px 26px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(219,232,224,.92);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

    .page-header h3 {
        margin: 10px 0 0;
        font-size: 36px;
        line-height: 1.1;
    }

    .page-header p {
        margin: 12px 0 0;
        color: var(--muted);
        font-size: 14px;
    }

.button,
.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.button {
    background: linear-gradient(180deg, #4db196 0%, #3e9981 100%);
    color: #fff;
    border: 1px solid rgba(43, 114, 95, 0.2);
    box-shadow: 0 12px 24px rgba(69, 144, 122, .22);
}

.button-secondary {
    background: rgba(255,255,255,.84);
    color: var(--primary-deep);
    border: 1px solid rgba(75,168,143,.18);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 18px;
}

.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 14px;
}

.kpi {
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(219,232,224,.92);
    background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,252,250,.92) 100%);
    box-shadow: 0 16px 40px rgba(98, 135, 120, 0.08);
}

    .kpi p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
    }

    .kpi strong {
        display: block;
        margin-top: 16px;
        font-size: 30px;
    }

    .kpi span {
        display: inline-block;
        margin-top: 10px;
        font-size: 13px;
        color: var(--primary-deep);
    }

.card {
    padding: 22px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(219,232,224,.92);
    background: rgba(255,255,255,.9);
    box-shadow: 0 14px 38px rgba(95, 129, 116, .07);
}

    .card h4 {
        margin: 0;
        font-size: 26px;
        line-height: 1.18;
    }

    .card .eyebrow {
        margin: 0 0 12px;
        color: var(--primary-deep);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .15em;
        text-transform: uppercase;
    }

.input,
.select {
    width: 100%;
    border: 1px solid rgba(193, 216, 205, 0.98);
    background: rgba(255,255,255,.92);
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 14px;
    color: var(--text);
    outline: none;
}

.hint {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--sky-soft);
    border: 1px solid #d2eaf2;
    color: #335a67;
    font-size: 14px;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(219,232,224,.92);
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    margin-top: 18px;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

th, td {
    padding: 14px 16px;
    border-bottom: 1px solid #edf2ef;
    text-align: left;
    font-size: 14px;
}

thead th {
    color: var(--muted);
    background: #f8fbf9;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

tbody tr:last-child td {
    border-bottom: 0;
}

.stat-stack {
    display: grid;
    gap: 14px;
}

.stat-box {
    border: 1px solid rgba(219,232,224,.92);
    border-radius: 20px;
    padding: 16px;
    background: linear-gradient(180deg, #f5fcf8 0%, #fffaf1 100%);
}

    .stat-box p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
    }

    .stat-box strong {
        display: block;
        margin-top: 10px;
        font-size: 28px;
    }

.site-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
}

.site-card {
    border: 1px solid rgba(219,232,224,.92);
    border-radius: 26px;
    padding: 22px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 15px 35px rgba(98, 135, 120, 0.08);
}

    .site-card h4 {
        margin: 10px 0 0;
        font-size: 26px;
    }

    .site-card p {
        margin: 10px 0 0;
        color: var(--muted);
        font-size: 14px;
    }

    .site-card .meta {
        display: grid;
        gap: 10px;
        margin-top: 18px;
    }

        .site-card .meta div {
            border-radius: 18px;
            padding: 14px;
            background: #f8fbf9;
            border: 1px solid #e7efea;
            font-size: 14px;
        }

.login-wrap {
    min-height: calc(100vh - 96px);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) 460px;
    gap: 20px;
}

.login-panel {
    padding: 32px;
    position: relative;
    overflow: hidden;
    min-height: 720px;
    border-radius: 34px;
    box-shadow: var(--shadow);
    background: #f0f5f2;
}

    .login-panel img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .login-panel::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, rgba(249,252,250,0.97) 12%, rgba(249,252,250,0.82) 48%, rgba(249,252,250,0.42) 100%);
    }

.login-copy {
    position: relative;
    z-index: 1;
    max-width: 520px;
    display: grid;
    gap: 18px;
    align-content: end;
    min-height: 100%;
}

    .login-copy h2 {
        margin: 0;
        font-size: clamp(34px, 5vw, 54px);
        line-height: 1.04;
    }

    .login-copy p {
        margin: 0;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.9;
    }

.login-form {
    padding: 30px;
    border-radius: 34px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(219,232,224,.96);
    box-shadow: var(--shadow);
    display: grid;
    align-content: center;
    gap: 18px;
}

    .login-form h3 {
        margin: 0;
        font-size: 30px;
    }

    .login-form label {
        display: grid;
        gap: 8px;
        font-size: 14px;
        font-weight: 700;
    }

    .login-form .helper {
        color: var(--muted);
        font-size: 13px;
    }

.info-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-top: 6px;
}

    .info-list .info {
        border-radius: 20px;
        background: linear-gradient(180deg, #f5fcf8 0%, #fffaf2 100%);
        border: 1px solid rgba(219,232,224,.92);
        padding: 14px;
    }

        .info-list .info small {
            color: var(--muted);
            display: block;
        }

        .info-list .info strong {
            display: block;
            margin-top: 8px;
            font-size: 16px;
        }

.two-col {
    display: grid;
    grid-template-columns: minmax(0,1.06fr) 340px;
    gap: 18px;
}

.timeline {
    position: relative;
    margin-top: 18px;
    padding-left: 30px;
    display: grid;
    gap: 16px;
}

    .timeline::before {
        content: "";
        position: absolute;
        left: 12px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(180deg, rgba(75,168,143,.24) 0%, rgba(75,168,143,.08) 100%);
    }

.timeline-item {
    position: relative;
    border: 1px solid rgba(219,232,224,.92);
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    padding: 18px;
    box-shadow: 0 10px 28px rgba(95,129,116,.06);
}

    .timeline-item::before {
        content: "";
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        left: -24px;
        top: 22px;
        background: var(--primary);
        box-shadow: 0 0 0 5px rgba(255,255,255,.95);
    }

    .timeline-item h5 {
        margin: 8px 0 0;
        font-size: 24px;
    }

    .timeline-item p {
        margin: 12px 0 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.8;
    }

.meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
    margin-top: 14px;
}

    .meta-grid div {
        border-radius: 16px;
        padding: 12px;
        border: 1px solid rgba(219,232,224,.88);
        background: linear-gradient(180deg, #f8fcfa 0%, #fffaf2 100%);
        font-size: 13px;
        color: var(--muted);
    }

.chart-box {
    margin-top: 18px;
    border-radius: 22px;
    border: 1px solid rgba(219,232,224,.92);
    background: linear-gradient(180deg, #fbfdfc 0%, #f4faf7 100%);
    padding: 18px;
    min-height: 280px;
}

.chart-canvas {
    height: 220px;
    display: flex;
    align-items: end;
    gap: 14px;
    padding-top: 24px;
}

.chart-group {
    flex: 1;
    display: flex;
    gap: 8px;
    align-items: end;
    justify-content: center;
    min-width: 0;
}

.bar {
    width: 28px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, #58b89f 0%, #41957f 100%);
}

    .bar.alt {
        background: linear-gradient(180deg, #f1c67f 0%, #dfa957 100%);
    }

.line-markers {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
}

.legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 13px;
    margin-top: 14px;
}

    .legend span::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 8px;
        border-radius: 999px;
        vertical-align: middle;
    }

    .legend .lg1::before {
        background: #4ba88f;
    }

    .legend .lg2::before {
        background: #f1be77;
    }

    .legend .lg3::before {
        background: #7aa7d5;
    }

.section-gap {
    margin-top: 18px;
}

.note {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.74);
    border: 1px dashed rgba(132, 171, 155, 0.5);
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 1180px) {
    .layout-shell,
    .login-wrap,
    .two-col,
    .site-cards,
    .grid-6,
    .grid-4,
    .grid-3,
    .grid-2,
    .meta-grid,
    .info-list {
        grid-template-columns: 1fr;
    }

    .sidebar {
        min-height: auto;
    }

    .page-header {
        align-items: start;
        flex-direction: column;
    }

    .account-card {
        margin-top: 0;
    }

    .line-markers {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 720px) {
    .topbar-inner {
        padding: 14px;
    }

    .page-wrap {
        padding: 16px 14px 26px;
    }

    .hero,
    .card,
    .login-form,
    .sidebar,
    .page-header,
    .site-card,
    .panel {
        border-radius: 24px;
    }

    .hero {
        min-height: 240px;
        padding: 22px;
    }

    .page-header {
        padding: 18px;
    }

    .login-panel,
    .login-form {
        min-height: auto;
        padding: 22px;
    }

    .timeline {
        padding-left: 24px;
    }

        .timeline::before {
            left: 9px;
        }

    .timeline-item::before {
        left: -19px;
    }

    table {
        min-width: 640px;
    }

    .nav-pills {
        width: 100%;
    }

        .nav-pills button {
            flex: 1 1 calc(50% - 10px);
        }
}

</style >