body { margin: 0; padding: 0; background-color: #000B1A; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #E0E0E0; line-height: 1.6; }
.container { max-width: 800px; margin: 0 auto; padding: 60px 20px; }
.skrap-logo { font-size: 48px; font-weight: 900; color: #00C2D1; letter-spacing: -2px; margin-bottom: 10px; text-shadow: 0 0 30px rgba(0, 194, 209, 0.4); text-decoration: none; display: block; }
h1 { color: #00C2D1; font-size: 36px; font-weight: 900; margin-bottom: 16px; }
h2 { color: #00C2D1; font-size: 20px; margin-top: 40px; border-bottom: 1px solid rgba(0, 194, 209, 0.3); padding-bottom: 10px; }
p, li { font-size: 16px; color: #B0B0B0; }
.accent-bar { width: 40px; height: 4px; background-color: #00C2D1; margin-bottom: 20px; border-radius: 2px; }
.nav-links { margin-top: 16px; }
.nav-links a { color: #00C2D1; margin-right: 16px; text-decoration: none; }
.nav-links a:hover { text-decoration: underline; }
.back-link { display: inline-block; margin-top: 40px; color: #00C2D1; text-decoration: none; font-weight: bold; }
.back-link:hover { text-decoration: underline; }
footer { margin-top: 60px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 14px; color: #666; text-align: center; }
.meta { font-size: 14px; color: #666; margin-bottom: 24px; }
.lang-switch { font-size: 13px; color: #888; margin: -8px 0 24px; }
.lang-switch a { color: #00C2D1; text-decoration: none; margin: 0 2px; }
.lang-switch a[aria-current="page"] { font-weight: 700; text-decoration: underline; }
.lang-switch a:hover { text-decoration: underline; }
#page-content { margin-top: 32px; }
.content-paragraph { white-space: pre-wrap; margin: 0 0 16px; font-size: 16px; color: #B0B0B0; line-height: 1.65; }
.content-heading { margin: 24px 0 12px; font-weight: 800; color: #00C2D1; }
.content-heading-1 { font-size: 28px; letter-spacing: -0.02em; }
.content-heading-2 { font-size: 22px; }
.content-heading-3 { font-size: 18px; font-weight: 700; color: #00C2D1; }
.content-list { margin: 0 0 16px 0; padding-left: 24px; color: #B0B0B0; }
.content-list li { margin-bottom: 8px; }
.content-paragraph strong, .content-list strong, .content-heading strong { color: #E8E8E8; font-weight: 700; }
.content-empty { color: #888; font-style: italic; }
#loading-state, #error-state { text-align: center; padding: 48px 0; color: #888; }
.spinner { width: 36px; height: 36px; border: 3px solid rgba(0,194,209,0.15); border-top: 3px solid #00C2D1; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-box { color: #f87171; }
.retry-btn { margin-top: 16px; padding: 10px 20px; border-radius: 12px; border: 1px solid rgba(0,194,209,0.4); background: transparent; color: #00C2D1; cursor: pointer; font-weight: bold; }
.supplement { margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.08); }
.supplement a { color: #00C2D1; }