* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --primary: #059669; --gold: #f59e0b; --dark: #111827; --card: #1f2937; --light: #f3f4f6; }
body { font-family: 'Inter', 'Segoe UI', sans-serif; background: linear-gradient(135deg, #111827, #1f2937); min-height: 100vh; color: #e5e7eb; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
header { background: rgba(17,24,39,0.95); backdrop-filter: blur(15px); padding: 20px 0; position: sticky; top: 0; z-index: 100; border-bottom: 2px solid var(--primary); }
.logo { font-size: 28px; font-weight: 800; color: #fff; }
.logo span { color: var(--primary); }
nav a { color: #9ca3af; text-decoration: none; margin-left: 25px; font-weight: 600; }
nav a:hover { color: var(--gold); }
.hero { background: linear-gradient(135deg, var(--primary), #047857); padding: 80px 0; text-align: center; }
.hero h1 { font-size: 48px; color: #fff; margin-bottom: 10px; }
.hero p { font-size: 18px; color: #d1fae5; }
main { padding: 50px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
.card { background: var(--card); border-radius: 16px; padding: 24px; text-align: center; transition: all 0.3s; border: 1px solid #374151; }
.card:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 10px 30px rgba(5,150,105,0.2); }
.card .icon { font-size: 48px; margin-bottom: 12px; }
.card h3 { color: #f9fafb; font-size: 16px; margin-bottom: 8px; }
.card a { display: inline-block; padding: 10px 22px; background: linear-gradient(135deg, var(--primary), var(--gold)); color: #fff; text-decoration: none; border-radius: 20px; font-weight: 600; font-size: 13px; }
footer { background: #0f172a; padding: 30px 0; text-align: center; border-top: 1px solid #374151; }
.tool-page, .article-page { background: var(--card); border-radius: 20px; padding: 40px; margin: 30px auto; max-width: 900px; }
.tool-page h1, .article-page h1 { color: #f9fafb; font-size: 28px; margin-bottom: 10px; }
.tool-page .desc { color: #9ca3af; text-align: center; margin-bottom: 25px; }
.tool-area { background: #111827; padding: 28px; border-radius: 12px; margin: 22px 0; }
.tool-area input { padding: 14px 18px; font-size: 15px; background: #1f2937; border: 2px solid #374151; border-radius: 10px; width: 200px; margin: 6px; color: #fff; }
.tool-area input:focus { border-color: var(--primary); outline: none; }
.tool-area select { padding: 14px 18px; font-size: 15px; background: #1f2937; border: 2px solid #374151; border-radius: 10px; width: 200px; margin: 6px; color: #fff; }
.tool-area button { padding: 14px 28px; background: linear-gradient(135deg, var(--primary), var(--gold)); color: #fff; border: none; border-radius: 25px; font-weight: 700; cursor: pointer; margin: 6px; }
.result-box { background: linear-gradient(135deg, rgba(5,150,105,0.2), rgba(245,158,11,0.2)); border: 1px solid var(--primary); padding: 24px; border-radius: 12px; margin: 22px 0; font-size: 18px; font-weight: 600; color: #fff; text-align: center; }
.rules { background: rgba(245,158,11,0.1); padding: 20px; border-radius: 12px; margin-top: 22px; border-left: 4px solid var(--gold); }
.rules h3 { color: var(--gold); margin-bottom: 12px; }
.rules li { color: #d1d5db; margin-bottom: 8px; margin-left: 18px; }
.back-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.article-page h1 { text-align: center; margin-bottom: 10px; }
.article-page .meta { color: #6b7280; text-align: center; margin-bottom: 30px; font-size: 14px; }
.article-page .content { line-height: 1.9; color: #d1d5db; font-size: 16px; }
.article-page .content h2 { color: var(--primary); margin: 30px 0 15px; font-size: 22px; }
.article-page .content p { margin-bottom: 18px; }
.article-page .content ul { margin: 15px 0; padding-left: 25px; }
.article-page .content li { margin-bottom: 10px; }
a[href^="privacy"], a[href^="terms"] { color: #6b7280; margin: 0 12px; }