body {
    margin:0;
    font-family:'Inter', sans-serif;
    background:#0D0D0D;
    color:#EAEAEA;
}

.container {
    max-width:1000px;
    margin:auto;
    padding:80px 20px;
}

.logo {
    max-width:420px;
    margin-bottom:30px;
}

h1 {
    font-size:42px;
    font-weight:400;
    margin:0;
}

.subtitle {
    color:#999;
    margin-top:10px;
}

.block {
    margin-top:80px;
}

input {
    width:100%;
    padding:12px;
    background:#111;
    border:1px solid #333;
    color:#EAEAEA;
    margin-top:10px;
}

button {
    margin-top:20px;
    padding:12px 20px;
    background:none;
    border:1px solid #555;
    color:#EAEAEA;
    cursor:pointer;
}

button:hover {
    border-color:#7A1C1C;
}

.result {
    margin-top:30px;
    padding:20px;
    border:1px solid #333;
}

.header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 40px;
    border-bottom:1px solid #222;
}

.header .logo {
    height:80px;
}

nav a {
    color:#AAA;
    text-decoration:none;
    margin-left:25px;
    font-size:14px;
}

nav a:hover {
    color:#FFF;
}


nav a.active {
    color:#FFF;
}

h2 {
    font-weight:400;
    margin-bottom:20px;
} 

p {
    text-align:justify;
    text-justify:inter-word;
    margin-bottom:20px;
}
.page {
	 max-width:1000px;
    margin:auto;
    padding:80px 20px;
    display:none;
    animation:fade 0.3s ease;
}

@keyframes fade {
    from { opacity:0; }
    to { opacity:1; }
}

input:focus {
    outline:none;
    border-color:#7A1C1C;
}

select {
    width:100%;
    padding:12px;
    background:#111;
    border:1px solid #333;
    color:#EAEAEA;
    margin-top:10px;
}
.search-item {
    display:flex;
    gap:15px;
    align-items:center;
    padding:12px;
    margin-bottom:10px;
    border:1px solid #222;
    cursor:pointer;
    transition:all 0.2s ease;
}

.search-item:hover {
    border-color:#7A1C1C;
    background:#111;
}

.search-img {
    width:90px;
    background:#111;
}

.search-content {
    flex:1;
}

.search-title {
    font-size:16px;
    margin-bottom:5px;
}

.search-action {
    font-size:12px;
    color:#777;
}

.search-item:hover .search-action {
    color:#fff;
}

.hero {
    position:relative;
    margin-bottom:40px;
}

.hero-img {
    width:100%;
    height:560px;
    object-fit:cover;
    
}

.hero-overlay {
    position:absolute;
    bottom:20px;
    left:20px;
}

.hero-overlay h1 {
    font-size:26px;
    font-weight:300;
}

.intro {
    margin-bottom:40px;
    color:#AAA;
    max-width:700px;
}

.grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:20px;
}

.card {
    border:1px solid #222;
    padding:20px;
    cursor:pointer;
    transition:all 0.2s ease;
}

.card:hover {
    border-color:#7A1C1C;
    background:#111;
}

.card h3 {
    margin:0 0 10px 0;
    font-weight:400;
}

.card p {
    font-size:14px;
    color:#888;
}
.card-icon {
    font-size:24px;
    margin-bottom:10px;
    opacity:0.8;
}

.card:hover .card-icon {
    transform:scale(1.1);
}


.card-icon {
    width:28px;
    height:28px;
    margin-bottom:12px;
    opacity:0.7;
    transition:all 0.25s ease;
}

.card-icon svg {
    width:100%;
    height:100%;
    fill:#aaa;
}

.card:hover .card-icon svg {
    fill:#fff;
    transform:scale(1.1);
}
.card {
    border:1px solid #222;
    padding:20px;
    cursor:pointer;
    transition:all 0.25s ease;
    transform:translateY(0);
}

.card:hover {
    border-color:#7A1C1C;
    background:#111;
    transform:translateY(-3px);
}
.hero::after {
    content:'';
    position:absolute;
    inset:0;
    
    pointer-events:none;
}

.contact-form {
    max-width:600px;
}

.form-group {
    margin-bottom:20px;
}

.form-group label {
    display:block;
    font-size:13px;
    color:#777;
    margin-bottom:6px;
}

.form-group input,
.form-group textarea {
    width:100%;
    padding:12px;
    background:#111;
    border:1px solid #333;
    color:#EAEAEA;
    font-family:'Inter', sans-serif;
    transition:all 0.2s ease;
}

.form-group textarea {
    height:120px;
    resize:none;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color:#7A1C1C;
    outline:none;
}

.btn-contact {
    padding:12px 25px;
    border:1px solid #555;
    background:none;
    color:#EAEAEA;
    cursor:pointer;
    transition:all 0.2s ease;
}

.btn-contact:hover {
    border-color:#7A1C1C;
    background:#111;
}

.contact-feedback {
    margin-top:15px;
    font-size:14px;
    color:#888;
}
.timeline {
    margin-top:40px;
    border-left:1px solid #222;
    padding-left:20px;
}

.timeline-item {
    margin-bottom:40px;
}

.timeline-date {
    font-size:14px;
    color:#888;
    margin-bottom:10px;
}

.timeline-content {
    display:flex;
    align-items:center;
    gap:20px;
}

.plate {
    width:120px;
    height:30px;
    border:1px solid #333;
}

/* styles */

.plate.black {
    background:#111;
}

.plate.yellow {
    background:#d4b000;
}

.plate.reflecto {
    background:#eee;
}

.plate.siv {
    background:#fff;
    border-left:10px solid #003399;
    border-right:10px solid #003399;
}
.page.active {
    display:block;
}
.timeline-content {
    display:flex;
    align-items:flex-start;
    gap:20px;
}

.plate-img {
    width:120px;
    height:40px;
    object-fit:cover;
    border:1px solid #333;
}

.vignette-img {
    width:120px;
    height:120px;
    object-fit:cover;
}
.timeline-item {
    min-height:60px;
}
.admin-access {
    color: #999;
    font-size: 18px;
    transition: 0.2s;
}

.admin-access:hover {
    color: #fff;
}
input,
textarea,
select{
    width:100%;
    background:#111;
    border:1px solid #333;
    color:#FFF;
    padding:12px;
    border-radius:6px;
    font-size:15px;
}


.container{
    max-width:1200px;
}

.mb-4{
    margin-bottom:35px;
}

.info-readonly{
    background:#111;
    border:1px solid #2c2c2c;
    padding:14px;
    border-radius:8px;
    color:#DDD;
    margin-top:8px;
}

textarea{
    width:100%;
    min-height:180px;
    background:#111;
    border:1px solid #333;
    color:#FFF;
    padding:15px;
    border-radius:8px;
    line-height:1.6;
}

label{
    display:block;
    margin-bottom:10px;
    font-size:15px;
    font-weight:600;
    color:#CCC;
}

.vehicle-cover{
    width:340px;
    border-radius:10px;
    margin-bottom:40px;
    background:#111;
    border:1px solid #222;
}
.media-section{
    margin-top:60px;
}

.media-item{
    margin-bottom:45px;
    padding-bottom:30px;
    border-bottom:1px solid #222;
}

.media-header{
    margin-bottom:15px;
}

.media-ok{
    color:#66BB6A;
    font-weight:600;
}

.media-missing-text{
    color:#FFB74D;
    font-weight:600;
}

.vehicle-thumb{
    width:240px;
    border-radius:8px;
    border:1px solid #222;
    background:#111;
    margin-bottom:15px;
}

.upload-form input[type=file]{
    margin-bottom:10px;
}
.gallery{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.gallery-item{
    width:220px;
}

.gallery-label{
    margin-top:8px;
    color:#AAA;
    font-size:14px;
    text-align:center;
}

.img{
    width:100%;
    border-radius:8px;
    background:#111;
    border:1px solid #222;
}
.priority-range{
    width:100%;
    margin-top:15px;
}

.priority-display{
    margin-top:10px;
    font-size:18px;
    font-weight:600;
}

.priority-legend{
    margin-top:8px;
    color:#888;
    font-size:13px;
}
.vehicle-priority{
    margin-top:20px;
    margin-bottom:30px;
    max-width:320px;
}

.priority-bar{
    height:10px;
    background:#222;
    border-radius:999px;
    overflow:hidden;
}

.priority-fill{
    height:100%;
    background:#4FC3F7;
    border-radius:999px;
}

.priority-text{
    margin-top:8px;
    color:#AAA;
    font-size:14px;
}
.vehicle-results{
    margin-top:20px;
}

.vehicle-result{
    background:#1A1A1A;
    border:1px solid #333;
    padding:15px;
    border-radius:10px;
    margin-bottom:15px;
}

.vehicle-result-title{
    font-weight:600;
}

.vehicle-result-meta{
    margin-top:5px;
    color:#888;
    font-size:14px;
}
.media-vehicles-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(420px,1fr));
    gap:30px;
}

.vehicle-media-card{
    background:#111;
    border:1px solid #222;
    border-radius:14px;
    padding:20px;
}

.vehicle-media-image{
    width:100%;
    border-radius:10px;
    margin-bottom:20px;
}

.vehicle-media-title{
    margin-bottom:5px;
}

.vehicle-media-years{
    color:#888;
    margin-bottom:20px;
}

.plate-item{
    background:#1A1A1A;
    border-radius:10px;
    padding:12px;
    margin-bottom:10px;
}

.plate-number{
    font-weight:700;
}

.plate-meta{
    color:#888;
    font-size:13px;
    margin-top:5px;
}
.media-poster{
    width:240px;
    border-radius:12px;
    border:1px solid #333;
}
.captures-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.capture-thumb{
    width:100%;
    border-radius:10px;
    border:1px solid #333;
}

.capture-caption{
    font-size:13px;
    color:#AAA;
    margin-top:5px;
}
.media-search-poster{
    width:120px;
    height:auto;
    border-radius:10px;
    margin:0 auto 15px auto;
    display:block;
}
.media-search-card{
    background:#111;
    border:1px solid #222;
    border-radius:14px;
    padding:20px;
    text-align:center;
}
.vehicle-badge{
    background:#1A1A1A;
    border-radius:30px;
    padding:6px 12px;
    display:inline-block;
    margin:4px;
    font-size:13px;
}
.media-public-header{
    display:flex;
    gap:40px;
    margin-bottom:50px;
    align-items:flex-start;
}

.media-public-poster{
    width:220px;
    border-radius:14px;
}

.media-public-main{
    flex:1;
}

.media-public-meta{
    color:#888;
    margin-top:10px;
}

.media-public-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:30px;
}

.media-public-vehicle-card{
    background:#111;
    border:1px solid #222;
    border-radius:14px;
    padding:20px;
}

.media-public-vehicle-image{
    width:100%;
    border-radius:10px;
    margin-bottom:15px;
}

.vehicle-role{
    color:#AAA;
    margin-top:10px;
}

.vehicle-comment{
    margin-top:15px;
    color:#DDD;
}

.public-plate{
    background:#1A1A1A;
    border-radius:8px;
    padding:8px 12px;
    margin-bottom:8px;
}

.block{
    margin-top:50px;
}
.media-appearances-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:25px;
}

.media-appearance-card{
    background:#111;
    border:1px solid #222;
    border-radius:14px;
    padding:18px;
    display:flex;
    flex-direction:column;
}

.media-appearance-poster{
    width:70px;
    height:auto;
    border-radius:8px;
    margin-bottom:12px;
    display:block;
}

.media-appearance-meta{
    color:#888;
    margin-top:5px;
}
.media-appearance-header{
    display:flex;
    gap:15px;
    align-items:flex-start;
}