@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root { --primary: #01b8c6; }

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

body { font-family: 'Inter', system_ui, sans-serif; background-color: #f8fafc; height: 100vh; overflow: hidden; color: #111827; }

.main-container { max-width: 768px; width: 100%; height: 100vh; margin: 0 auto; background: white; box-shadow: 0 30px 70px -15px rgb(0 0 0 / 0.3); display: flex; flex-direction: column; overflow: hidden; }

.header { background-color: var(--primary); padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.header-left { display: flex; align-items: center; gap: 16px; }
.title { font-size: 36px; font-weight: 600; letter-spacing: -1.5px; color: white; }
.header-logo-right { width: 68px; height: 68px; object-fit: contain; }

.content::-webkit-scrollbar { width: 8px; }
.content::-webkit-scrollbar-thumb { background-color: #01b8c6; border-radius: 20px; }
.content { flex: 1; overflow-y: auto; padding: 32px 32px 40px; }

/* IMAGE */
.image-container {
    margin-bottom: 32px;
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    height: 280px;
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-container img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.image-container:hover img {
    transform: scale(1.03);
}

/* LIGHTBOX */
#lightbox {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.92);
    display:none;
    align-items:center; justify-content:center;
    z-index:1000;
    padding:20px;
    cursor:zoom-out;
}
#lightbox.active { display:flex; }
#lightbox img { max-width:100%; max-height:92vh; border-radius:12px; box-shadow:0 25px 50px -12px rgb(0 0 0 / 0.6); }
.lightbox-close { position:absolute; top:25px; right:25px; color:white; font-size:42px; font-weight:300; cursor:pointer; line-height:1; opacity:0.8; }
.lightbox-close:hover { opacity:1; }

/* DATA CARD */
.data-card { border: 3px solid #01b8c6; border-radius: 24px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4); background: white; padding: 4px; margin-bottom: 40px; }
.data-inner { background: white; border-radius: 20px; padding: 6px 0; }
.data-row { display:flex; justify-content:space-between; align-items:center; min-height:60px; padding:18px 24px; transition: background 0.2s; }
.data-row:hover { background-color: rgba(1,184,198,0.05); }
.label { font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; color:#64748b; }
.value { font-size:15.5px; font-weight:600; color:#1f2937; }
.brand-row { display:flex; align-items:center; gap:14px; }
.flag { font-size:42px; font-family:"Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif; line-height:1; }

.version-tag { display:inline-flex; align-items:center; background:rgba(1,184,198,0.1); color:#01b8c6; padding:6px 14px; border-radius:9999px; font-size:15px; font-weight:600; text-decoration:none; height:34px; line-height:1; transition: all 0.2s; white-space:nowrap; }
.version-tag:hover { background:#01b8c6; color:white; transform:translateY(-1px); }

.safety-ratings { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; align-items:center; }
.safety-item { font-size:15.5px; font-weight:600; color:#1f2937; padding:6px 14px; border-radius:9999px; background:transparent; display:inline-flex; align-items:center; height:34px; line-height:1; white-space:nowrap; }
.safety-tag { display:inline-flex; align-items:center; background:rgba(1,184,198,0.1); color:#01b8c6; padding:6px 14px; border-radius:9999px; font-size:15px; font-weight:600; text-decoration:none; height:34px; line-height:1; transition: all 0.2s; white-space:nowrap; }
.safety-tag:hover { background:#01b8c6; color:white; transform:translateY(-1px); }

.video-link { display:flex; flex-direction:column; align-items:center; color:#01b8c6; text-decoration:none; transition:transform 0.2s; margin-bottom:40px; }
.video-link:hover { transform:scale(1.08); }
.video-link .icon { font-size:78px; margin-bottom:8px; }
.video-link span { font-size:15px; font-weight:600; letter-spacing:2px; text-transform:uppercase; }