/* ==========================================================================
   Plagiarism.Free design system
   One brand color (deep teal), near-white canvas, 16-20px radii, soft
   shadows, 8px spacing scale. Dark mode via [data-bs-theme="dark"].
   ========================================================================== */

:root {
    --pf-brand: #0b6e66;
    --pf-brand-dark: #0b4f4a;
    --pf-brand-bright: #14b8a6;
    --pf-brand-soft: #e4f2f0;
    --pf-canvas: #f6faf9;
    --pf-surface: #ffffff;
    --pf-ink: #16302e;
    --pf-muted: #5a6d6b;
    --pf-line: #dfe9e7;
    --pf-radius: 18px;
    --pf-radius-sm: 12px;
    --pf-shadow: 0 1px 2px rgba(11, 79, 74, 0.05), 0 8px 24px rgba(11, 79, 74, 0.07);
    --pf-shadow-lg: 0 2px 4px rgba(11, 79, 74, 0.06), 0 16px 48px rgba(11, 79, 74, 0.12);
    --pf-gradient: linear-gradient(135deg, #0b6e66 0%, #0f9488 55%, #14b8a6 100%);
    --pf-exact-bg: rgba(220, 76, 62, 0.16);
    --pf-exact-line: #c2483d;
    --pf-near-bg: rgba(230, 162, 34, 0.20);
    --pf-near-line: #b07c14;
    --pf-green: #1a7f4e;
    --pf-amber: #a86a00;
    --pf-red: #b3352c;
}

[data-bs-theme="dark"] {
    --pf-brand: #2dd4bf;
    --pf-brand-dark: #14b8a6;
    --pf-brand-bright: #5eead4;
    --pf-brand-soft: rgba(20, 184, 166, 0.12);
    --pf-canvas: #0e1615;
    --pf-surface: #17211f;
    --pf-ink: #e6efed;
    --pf-muted: #93a5a2;
    --pf-line: #263533;
    --pf-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --pf-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 48px rgba(0, 0, 0, 0.5);
    --pf-exact-bg: rgba(248, 113, 100, 0.22);
    --pf-exact-line: #f87164;
    --pf-near-bg: rgba(250, 200, 90, 0.20);
    --pf-near-line: #eab308;
    --pf-green: #4ade80;
    --pf-amber: #fbbf24;
    --pf-red: #f87171;
}

/* ---- Canvas & type ---------------------------------------------------- */

body {
    background: var(--pf-canvas);
    color: var(--pf-ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1; }

h1, h2, h3, .navbar-brand { letter-spacing: -0.015em; }
h1 { font-weight: 750; }
h2 { font-weight: 700; }

a { color: var(--pf-brand); }
a:hover { color: var(--pf-brand-dark); }

::selection { background: rgba(20, 184, 166, 0.25); }

/* ---- Navbar & footer --------------------------------------------------- */

.navbar {
    background: var(--pf-surface) !important;
    border-bottom: 1px solid var(--pf-line);
    padding-top: 12px;
    padding-bottom: 12px;
}

.navbar-brand { font-weight: 800; color: var(--pf-brand-dark) !important; }
.navbar-brand .pf-logo { margin-right: 8px; vertical-align: -4px; }

.navbar .nav-link { color: var(--pf-muted); font-weight: 500; border-radius: 10px; }
.navbar .nav-link:hover { color: var(--pf-ink); }
.navbar .nav-link.active { color: var(--pf-brand); font-weight: 650; }

footer.bg-light {
    background: var(--pf-surface) !important;
    border-top: 1px solid var(--pf-line);
}

[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link { color: var(--pf-muted); }
[data-bs-theme="dark"] .navbar-light .navbar-brand { color: var(--pf-brand) !important; }
[data-bs-theme="dark"] .navbar-toggler { border-color: var(--pf-line); }

/* ---- Buttons ------------------------------------------------------------ */

.btn { border-radius: 12px; font-weight: 600; }

.btn-brand, .btn-primary {
    background: var(--pf-gradient);
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(11, 110, 102, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn-brand:hover, .btn-primary:hover,
.btn-brand:focus, .btn-primary:focus {
    background: var(--pf-gradient);
    color: #fff;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(11, 110, 102, 0.45);
}
.btn-brand:disabled, .btn-primary:disabled {
    background: var(--pf-gradient);
    filter: saturate(0.4) brightness(1.1);
    color: #fff;
}

.btn-outline-brand, .btn-outline-secondary {
    border: 1.5px solid var(--pf-line);
    color: var(--pf-brand);
    background: var(--pf-surface);
}
.btn-outline-brand:hover, .btn-outline-secondary:hover {
    background: var(--pf-brand-soft);
    border-color: var(--pf-brand);
    color: var(--pf-brand-dark);
}
[data-bs-theme="dark"] .btn-outline-brand:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover { color: var(--pf-brand-bright); }

.btn-success { background: var(--pf-gradient); border: none; }

/* ---- Cards --------------------------------------------------------------- */

.card, .plag-card {
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    background: var(--pf-surface);
    box-shadow: var(--pf-shadow);
}

.accordion-item { background: var(--pf-surface); border-color: var(--pf-line); }
.accordion-item:first-of-type { border-top-left-radius: var(--pf-radius-sm); border-top-right-radius: var(--pf-radius-sm); }
.accordion-item:last-of-type { border-bottom-left-radius: var(--pf-radius-sm); border-bottom-right-radius: var(--pf-radius-sm); }
.accordion-button { background: var(--pf-surface); color: var(--pf-ink); font-weight: 600; }
.accordion-button:not(.collapsed) {
    background: var(--pf-brand-soft);
    color: var(--pf-brand-dark);
    box-shadow: none;
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) { color: var(--pf-brand-bright); }
.accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.2); border-color: var(--pf-brand); }

/* ---- Checker widget (the hero panel) ------------------------------------- */

#plagWidget {
    border: none;
    border-radius: 20px;
    box-shadow: var(--pf-shadow-lg);
    position: relative;
    overflow: hidden;
}
#plagWidget::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: var(--pf-gradient);
}

#plagText {
    border: 1.5px solid var(--pf-line);
    border-radius: var(--pf-radius-sm);
    background: var(--pf-canvas);
    color: var(--pf-ink);
    font-size: 1rem;
    line-height: 1.65;
    padding: 16px;
    resize: vertical;
    min-height: 240px;
}
#plagText:focus {
    border-color: var(--pf-brand);
    box-shadow: 0 0 0 0.25rem rgba(20, 184, 166, 0.18);
    background: var(--pf-surface);
}

.form-control { border-radius: var(--pf-radius-sm); }
.form-control:focus {
    border-color: var(--pf-brand);
    box-shadow: 0 0 0 0.25rem rgba(20, 184, 166, 0.18);
}

/* ---- Progress -------------------------------------------------------------- */

.progress {
    border-radius: 999px;
    background: var(--pf-brand-soft);
    box-shadow: inset 0 1px 2px rgba(11, 79, 74, 0.08);
}
.progress-bar { background: var(--pf-gradient); border-radius: 999px; }

/* ---- Report: gauge ---------------------------------------------------------- */

.plag-gauge {
    --pct: 0;
    --gauge-color: var(--pf-green);
    width: 158px;
    height: 158px;
    border-radius: 50%;
    background: conic-gradient(var(--gauge-color) calc(var(--pct) * 1%),
                               var(--pf-brand-soft) 0);
    display: inline-grid;
    place-items: center;
}
.plag-gauge-amber { --gauge-color: var(--pf-amber); }
.plag-gauge-red { --gauge-color: var(--pf-red); }
.plag-gauge-green { --gauge-color: var(--pf-green); }
.plag-gauge-inner {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: var(--pf-surface);
    display: grid;
    place-items: center;
    align-content: center;
    box-shadow: inset 0 1px 4px rgba(11, 79, 74, 0.06);
}
.plag-gauge-num { font-size: 2rem; font-weight: 800; line-height: 1; }
.plag-gauge-label { font-size: 0.75rem; color: var(--pf-muted); text-transform: uppercase; letter-spacing: 0.08em; }

.plag-band-line { font-weight: 700; }
.plag-band-green { color: var(--pf-green); }
.plag-band-amber { color: var(--pf-amber); }
.plag-band-red { color: var(--pf-red); }

/* ---- Report: document & highlights ------------------------------------------ */

.plag-doc { font-size: 1.02rem; line-height: 1.9; }

.plag-sent { border-radius: 5px; padding: 1px 2px; }
.plag-sent-exact {
    background: var(--pf-exact-bg);
    box-shadow: inset 0 -2px 0 var(--pf-exact-line);
    cursor: pointer;
}
.plag-sent-near {
    background: var(--pf-near-bg);
    box-shadow: inset 0 -2px 0 var(--pf-near-line);
    cursor: pointer;
}
.plag-sent-exact:hover, .plag-sent-near:hover { filter: brightness(0.95); }
.plag-sent-active { outline: 2px solid var(--pf-brand); outline-offset: 1px; }

.plag-legend .plag-chip {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    vertical-align: -2px;
    margin-right: 4px;
}
.plag-chip-exact { background: var(--pf-exact-bg); box-shadow: inset 0 -2px 0 var(--pf-exact-line); }
.plag-chip-near { background: var(--pf-near-bg); box-shadow: inset 0 -2px 0 var(--pf-near-line); }
.plag-chip-none { background: var(--pf-brand-soft); }

.plag-sticky { position: sticky; top: 16px; }

.plag-quote {
    border-left: 3px solid var(--pf-line);
    padding: 8px 12px;
    margin: 0 0 16px;
    background: var(--pf-canvas);
    border-radius: 0 var(--pf-radius-sm) var(--pf-radius-sm) 0;
    font-size: 0.95rem;
}
.plag-quote-src { border-left-color: var(--pf-brand); }

.plag-source-list { padding-left: 20px; margin: 0; }
.plag-source {
    padding: 10px 12px;
    margin: 0 0 8px;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-sm);
    background: var(--pf-canvas);
}
.plag-source-active { border-color: var(--pf-brand); background: var(--pf-brand-soft); }
.plag-source-title { font-weight: 600; text-decoration: none; }
.plag-source-pct {
    font-weight: 800;
    color: var(--pf-brand);
    white-space: nowrap;
}
.plag-source-url { word-break: break-all; }

.plag-disclaimer {
    border: 1px dashed var(--pf-line);
    border-radius: var(--pf-radius-sm);
    padding: 16px 20px;
    background: var(--pf-surface);
}

/* ---- Pricing ------------------------------------------------------------------- */

.plag-plan { cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; }
.plag-plan:hover { transform: translateY(-3px); box-shadow: var(--pf-shadow-lg); }
.plag-plan:has(.plag-plan-radio:checked) {
    border: 2px solid var(--pf-brand);
    box-shadow: var(--pf-shadow-lg);
}
.plag-plan-radio { float: right; }
.plag-plan-name { color: var(--pf-muted); letter-spacing: 0.1em; font-weight: 700; }
.plag-plan-price { font-size: 2.2rem; font-weight: 800; color: var(--pf-brand-dark); }
[data-bs-theme="dark"] .plag-plan-price { color: var(--pf-brand-bright); }
.plag-free-tier { border: 2px solid var(--pf-brand); }

/* ---- Code blocks ------------------------------------------------------------------ */

.plag-code {
    display: block;
    background: #0f1c1a;
    color: #a7f3eb;
    border-radius: var(--pf-radius-sm);
    padding: 14px 18px;
    font-size: 0.85rem;
    overflow-x: auto;
    white-space: pre;
}
code.plag-code { white-space: pre-wrap; word-break: break-all; }

/* ---- Tables ------------------------------------------------------------------------- */

.table { --bs-table-bg: transparent; }
.table th { color: var(--pf-brand-dark); }
[data-bs-theme="dark"] .table th { color: var(--pf-brand-bright); }

/* ---- Theme toggle --------------------------------------------------------------------- */

#pfThemeToggle {
    border: none;
    background: transparent;
    color: var(--pf-muted);
    font-size: 1.1rem;
    padding: 6px 10px;
    border-radius: 10px;
}
#pfThemeToggle:hover { color: var(--pf-brand); background: var(--pf-brand-soft); }

/* ---- Misc ------------------------------------------------------------------------------- */

.alert { border-radius: var(--pf-radius-sm); }
.alert ul { margin: 0; padding-left: 1rem; }

#card-element {
    border: 1px solid var(--pf-line);
    padding: 0.75rem;
    border-radius: var(--pf-radius-sm);
}

.hidden { display: none !important; }

.dropdown-menu {
    border-radius: var(--pf-radius-sm);
    border-color: var(--pf-line);
    box-shadow: var(--pf-shadow);
}

@media (max-width: 768px) {
    .display-4 { font-size: 2rem; }
    .plag-sticky { position: static; }
    .plag-gauge { width: 130px; height: 130px; }
    .plag-gauge-inner { width: 96px; height: 96px; }
    .plag-gauge-num { font-size: 1.6rem; }
}