:root { --bg: #05080f; --accent: #6366f1; --accent2: #a78bfa; --text: #f1f5f9; --muted: #94a3b8; --accent-rgb: 99, 102, 241; --accent2-rgb: 139, 92, 246; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { max-width: 100vw; overflow-x: hidden; }
body { background: var(--bg); color: var(--text); font-family: 'Outfit', sans-serif; min-height: 100vh; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--accent-rgb), 0.08) 0%, transparent 60%), var(--bg); display: flex; flex-direction: column; }
.container { max-width: 800px; margin: 0 auto; padding: 4rem 2rem; flex: 1; }
h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.2; }
.meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 3rem; display: flex; gap: 1rem; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 1.5rem; }
.content { color: #cbd5e1; font-size: 1.05rem; line-height: 1.8; }
.content p { margin-bottom: 1.5rem; }
.content h2 { font-size: 1.8rem; font-weight: 700; color: var(--text); margin: 2.5rem 0 1rem; }
.content h3 { font-size: 1.3rem; font-weight: 600; color: var(--accent2); margin: 2rem 0 1rem; }
.content ul { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.content li { margin-bottom: 0.5rem; }
.content strong { color: white; }
.content .highlight-box { background: rgba(239,68,68,0.06); border-left: 3px solid #ef4444; padding: 1.25rem 1.5rem; border-radius: 0 12px 12px 0; margin-bottom: 1.5rem; }
.content .highlight-box.green { background: rgba(16,185,129,0.06); border-left-color: #10b981; }
.back { display: inline-block; margin-bottom: 2rem; color: var(--muted); text-decoration: none; font-size: 0.85rem; }
.back:hover { color: var(--accent2); }
.cta-box { background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.2); border-radius: 16px; padding: 2rem; text-align: left; margin-top: 3rem; }
.cta-box h3 { margin-top: 0; color: white; font-size: 1.5rem; }
.btn { display: inline-block; padding: 0.8rem 1.5rem; background: var(--accent); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; margin-top: 1rem; transition: background 0.2s; }
.btn:hover { background: var(--accent2); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.2); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.4); }

/* Author box */
.author-box { display: flex; gap: 1.5rem; align-items: flex-start; background: rgba(var(--accent-rgb), 0.06); border: 1px solid rgba(var(--accent-rgb), 0.12); border-radius: 16px; padding: 1.5rem; margin-top: 2rem; }
.author-avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 1.3rem; }
.author-info { flex: 1; }
.author-name { font-weight: 700; color: var(--text); font-size: 1rem; margin-bottom: 0.2rem; }
.author-role { color: var(--accent2); font-size: 0.82rem; margin-bottom: 0.5rem; }
.author-bio { color: var(--muted); font-size: 0.85rem; line-height: 1.5; }

/* Related posts */
.related-posts { margin-top: 2rem; }
.related-posts h3 { color: var(--text); font-size: 1.2rem; margin-bottom: 1rem; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.related-card { background: rgba(var(--accent-rgb), 0.04); border: 1px solid rgba(var(--accent-rgb), 0.1); border-radius: 12px; padding: 1rem; text-decoration: none; transition: all 0.3s; }
.related-card:hover { border-color: rgba(var(--accent-rgb), 0.3); transform: translateY(-2px); background: rgba(var(--accent-rgb), 0.08); }
.related-card .tag { font-size: 0.7rem; color: var(--accent2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
.related-card h4 { color: var(--text); font-size: 0.9rem; font-weight: 600; line-height: 1.3; margin: 0; }

/* Universal menu */
#login-btn { font-weight: 600 !important; font-size: 0.78rem !important; border-radius: 6px !important; height: auto !important; line-height: 1.2 !important; width: 100% !important; display: flex !important; align-items: center !important; text-align: left !important; padding: 0.5rem !important; }
header { position: relative; z-index: 100; width: 100%; background: rgba(17, 24, 39, 0.75); padding: 0.6rem 1.25rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(var(--accent-rgb), 0.15); flex-shrink: 0; gap: 0.75rem; flex-wrap: wrap; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.header-left { display: flex; align-items: center; gap: 0.7rem; }
.header-right { display: flex; align-items: center; gap: 0.4rem; position: relative; flex-wrap: wrap; justify-content: flex-end; }
header .logo { font-size: 1.5rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
header .logo-wrap { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
header .logo-wrap img { width: 64px; height: 64px; display: block; object-fit: contain; }
header .logo-ring { position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent2); animation: orbit 3s linear infinite; }
header .logo-ring-2 { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid transparent; border-bottom-color: rgba(var(--accent-rgb), 0.4); border-left-color: rgba(var(--accent2-rgb), 0.4); animation: orbit-reverse 4s linear infinite; }
header .logo-dot { position: absolute; width: 3px; height: 3px; background: var(--accent); border-radius: 50%; top: -6px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 6px var(--accent); }
.header-tagline { font-size: 0.75rem; color: #94a3b8; font-weight: 400; letter-spacing: 0.3px; }
.header-more-btn { background: none; border: 1px solid rgba(var(--accent-rgb), 0.2); color: var(--text); width: 38px; height: 38px; border-radius: 6px; cursor: pointer; font-size: 1.3rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; }
.header-more-btn:hover { background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.4); }
.header-more-items { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(var(--accent-rgb), 0.15); border-radius: 12px; padding: 0.35rem; z-index: 1000; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); max-height: calc(100vh - 80px) !important; overflow-y: auto !important; }
.header-more-items.open { display: flex; flex-direction: column; gap: 0.2rem; }
.header-more-items .btn { width: 100%; text-align: left; padding: 0.4rem 0.65rem; font-size: 0.78rem; display: block; }
@media (max-width: 768px) { .desktop-only { display: none !important; } .header-more-items { right: 0 !important; left: auto !important; max-height: calc(100vh - 80px) !important; overflow-y: auto !important; } }
@media (min-width: 769px) { .mobile-only { display: none !important; } .header-more-items { min-width: 380px; max-height: none !important; overflow: visible !important; } #menu-app:not([style*="display: none"]):not([style*="display:none"]), #menu-public:not([style*="display: none"]):not([style*="display:none"]) { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.3rem !important; } #signout-btn { grid-column: span 2 !important; } }
#output-area, #result, #output, .result, .output, #response-area, #content-area { max-width: 100% !important; overflow-x: auto !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: pre-wrap !important; }
#output-area table, #result table, #output table, .result table, .output table, #response-area table, #content-area table { display: table !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

/* Google Translate */
iframe.skiptranslate, iframe[name="google_translate_iframe"], .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; pointer-events: none !important; z-index: -999999 !important; }
.goog-text-highlight { background-color: transparent !important; box-shadow: none !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
body { top: 0px !important; position: static !important; }
html { height: auto !important; margin-top: 0px !important; }
.custom-lang-select { background: linear-gradient(135deg, #6366f1, #a78bfa); border: none; border-radius: 8px; padding: 0 0.8rem; height: 32px; color: #ffffff; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.85rem; cursor: pointer; outline: none; box-shadow: 0 4px 15px rgba(0,0,0,0.2); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 0.7rem top 50%; background-size: 0.65rem auto; padding-right: 2rem; }
.custom-lang-select:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4); }
.custom-lang-select option { background: #1e293b; color: #ffffff; font-family: 'Outfit', sans-serif; }

/* Mobile */
@media (max-width: 768px) {
  .logo { gap: 0.5rem !important; }
  .header-tagline { display: none !important; }
  h1 { font-size: 2rem !important; }
  .container { padding: 2rem 1rem !important; }
  .logo-wrap { width: 38px !important; height: 38px !important; }
  .logo-wrap img { width: 38px !important; height: 38px !important; }
  .logo-ring { inset: -5px !important; }
  .logo-ring-2 { inset: -10px !important; }
  header { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; position: relative !important; }
  header > .logo { flex: 1 1 auto !important; text-align: left !important; margin-bottom: 0 !important; }
  header > .header-right { margin-left: auto !important; margin-right: 0 !important; width: auto !important; }
  .header-more-items, #mobileMenu { text-align: left !important; }
  .header-more-items *, #mobileMenu * { text-align: left !important; box-sizing: border-box !important; }
  .header-more-items button, .header-more-items a, #mobileMenu button, #mobileMenu a { width: 100% !important; text-align: left !important; justify-content: flex-start !important; }
  .header-more-items .btn-outline, #mobileMenu .btn-outline, .header-more-items .nav-link, #mobileMenu .nav-link { border: none !important; background: transparent !important; padding: 0.5rem 0 !important; height: auto !important; }
}
@keyframes orbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes orbit-reverse { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }