/* Common */
html, body { height:100%; margin:0; padding:0; overflow:hidden; font-family:Tahoma, Geneva, Verdana, sans-serif; background:#000000; }
.container { display:flex; flex-direction:column; height:100%; }
/* Header */
header { display:flex; align-items:flex-end; padding:8px 20px; background:#222222; border-bottom:1px solid #eee; }
.logo-text-wrapper { display:flex; align-items:center; margin-right:25px; align-self:flex-start; margin-top:2px; }
.logo-main { font-size:18px; color:#ff0000; font-weight:bolder; letter-spacing:-1px; line-height:1; }
.logo-sub { font-size:18px; color:#ffffff; font-weight:300; margin-left:2px; line-height:1; }
.divider { width:1px; height:100%; background:#ddd; margin:0 15px; }
.header-text { flex-grow:1; display:flex; flex-direction:column; padding-right:30px; }
.header-text p { margin:0; padding:0; line-height:1; display:block; }
.header-text h1 { font-size:0.9rem; color:#ffffff; line-height:1.1; margin:0; padding:0; }
.description { font-size:0.75rem; margin:-2px 0 0 0; color:#ffffff; }
/* Iframe */
.iframe-wrapper { position:relative; flex-grow:1; display:flex; flex-direction:column; overflow-y:none; }
.iframe-wrapper iframe { width:100%; height:100%; border:none; flex-grow:1; }
/* Spinner */
.loader { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:40px; height:40px; border:4px solid #f3f3f3; border-top:4px solid #007bff; border-radius:50%; animation:spin 1s linear infinite; z-index:5; }
@keyframes spin { 0% { transform:translate(-50%, -50%) rotate(0deg); } 100% { transform:translate(-50%, -50%) rotate(360deg); } }
.hidden { display:none; }
/* Footer */
footer { display:flex; align-items:center; justify-content:center; padding:5px 20px; background:#222222; border-top:1px solid #333; color:#ffffff; font-size:0.75rem; z-index:10;  flex-shrink:0; }
footer a { color:#007bff; text-decoration:none; margin:0 10px; }
footer a:hover { text-decoration:underline; }
/* Languages */
.lang-switcher { display:flex; align-items:flex-end; line-height:1; margin-left:auto; align-self:flex-end; padding-bottom:0; font-size:0.75rem; }
.lang-switcher a { line-height:1; display:inline-block; vertical-align:bottom; color:#ffff00; }
/* Content */
.content { padding:40px; width:90%; margin:0 auto; line-height:1.6; background:#000000; color:#ffffff; font-family:sans-serif; overflow-y:scroll; }
.content a { color:#ffff00; }
/* Responsive */
@media (max-width:700px) {
header { flex-direction:column; align-items:stretch; height:auto; }
.logo-text-wrapper { width:100%; padding-bottom:3px; margin-bottom:3px; }
.divider { display:none; }
.header-text h1 { font-size:0.85rem; }
.header-text { padding-right:0; }
.description { font-size:0.7rem; white-space:normal; }
.lang-switcher { margin-top:10px; gap:8px; justify-content:flex-end; width:100%; display:flex; align-items:center; }
.lang-switcher a { padding:8px 6px; text-decoration:none; display:inline-block; }
.lang-switcher span { color:#ffffff; }
.header-text { align-items:flex-start; }
}