:root {
    --purple: #521A6A;
    --purple-dark: #381953;
    --purple-alt: #601780;
    --blue: #5FAAE2;
    --navy: #2C437C;

    --bg: #F7F5FA;
    --surface: #FFFFFF;
    --text: #231A2B;
    --muted: #6B6172;
    --border: #E7E0EC;
    --tint: #F1EAF5;

    --success: #2F8F6B;
    --warning: #B86E16;
    --danger: #B83E59;

    --accent: var(--purple);
    --accent-contrast: #ffffff;
    --badge-bg: var(--tint);

    --radius-field: 10px;
    --radius-button: 16px;
    --radius-card: 20px;
    --control-height: 48px;
    --shadow-card: 0 8px 30px rgba(56, 25, 83, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Manrope", "Inter", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.container { max-width: 1160px; margin: 0 auto; padding: 24px; }

.navbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.navbar-brand { font-weight: 800; display: flex; align-items: center; gap: 8px; }
.brand-mark {
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--purple); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7em; font-weight: 800;
}
.navbar-links { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; }
.navbar-links a { color: var(--muted); text-decoration: none; padding: 4px 0; font-weight: 500; border-bottom: 2px solid transparent; }
.navbar-links a.active, .navbar-links a:hover { color: var(--purple); border-bottom-color: var(--purple); }
.navbar-user { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.9em; }

h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 16px; }
h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }

a { color: var(--purple); }

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }

.card {
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 20px 24px;
    margin-bottom: 16px;
}

.button, button, input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--purple);
    color: #fff;
    border: none;
    border-radius: var(--radius-button);
    padding: 0 18px;
    min-height: var(--control-height);
    font-size: 0.95em;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
button:active, .button:active { opacity: 0.85; }
.button.secondary { background: var(--tint); color: var(--purple); }
button.danger, .button.danger { background: var(--danger); }

.link-button {
    background: none;
    border: none;
    color: var(--purple);
    padding: 0;
    min-height: auto;
    cursor: pointer;
    font-size: inherit;
    font-weight: 500;
    text-decoration: underline;
}
.link-button.danger { color: var(--danger); }

.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.92em; }
.table th { color: var(--muted); font-weight: 600; background: var(--tint); }
.table tr:last-child td { border-bottom: none; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.badge { display: inline-block; background: var(--badge-bg); color: var(--purple); border-radius: 999px; padding: 3px 12px; font-size: 0.8em; font-weight: 600; }

.filters, .tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filters a, .tabs a { padding: 8px 14px; border-radius: var(--radius-button); text-decoration: none; color: var(--muted); background: var(--surface); border: 1px solid var(--border); font-weight: 500; font-size: 0.92em; }
.filters a.active, .tabs a.active { color: #fff; background: var(--purple); border-color: var(--purple); }

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0; }
.stat-tile { background: var(--tint); border-radius: var(--radius-field); padding: 14px 20px; min-width: 130px; }
.stat-value { display: block; font-size: 1.7rem; font-weight: 800; color: var(--purple-dark); }
.stat-label { color: var(--muted); font-size: 0.85em; font-weight: 500; }

.form, .search-form { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > label { flex: 1; min-width: 180px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9em; font-weight: 500; color: var(--muted); }
.form input, .form select, .form textarea, .search-form input {
    min-height: var(--control-height);
    padding: 0 12px;
    border-radius: var(--radius-field);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.95em;
    font-family: inherit;
}
.form input:focus, .form select:focus, .form textarea:focus, .search-form input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(82, 26, 106, 0.12);
}
.form textarea { min-height: 90px; padding: 12px; resize: vertical; }
.form .checkbox { flex-direction: row; align-items: center; }
.search-form { flex-direction: row; max-width: 480px; margin-bottom: 16px; }
.search-form input { flex: 1; }

fieldset { border: 1px solid var(--border); border-radius: var(--radius-field); padding: 12px; }
legend { color: var(--muted); font-size: 0.9em; padding: 0 6px; font-weight: 500; }

.login-box { max-width: 380px; margin: 60px auto; background: var(--surface); padding: 32px; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.login-box h1 { margin-bottom: 20px; }
.error { color: var(--danger); }
.muted { color: var(--muted); font-size: 0.9em; }

.kv-table { border-collapse: collapse; }
.kv-table th { text-align: left; color: var(--muted); padding: 8px 16px 8px 0; font-weight: 600; vertical-align: top; }
.kv-table td { padding: 8px 0; }

.timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.timeline li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-field); padding: 12px 16px; }
.timeline-time { color: var(--muted); font-size: 0.85em; margin-right: 8px; }

.scan-box { max-width: 480px; }
#scan-video { width: 100%; border-radius: var(--radius-card); background: #000; }
#scan-status { margin-top: 10px; font-weight: 600; }
#scan-status.ok { color: var(--success); }
#scan-status.error { color: var(--danger); }

.privacy-page { max-width: 720px; line-height: 1.6; }
.privacy-page .notice { background: #FBE8CF; color: var(--warning); padding: 10px 14px; border-radius: var(--radius-field); font-weight: 500; }