* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --primary: #f97316; --blue: #0ea5e9; --dark: #0f172a; --card: #1e293b; }
body { font-family: 'Inter', 'Segoe UI', sans-serif; background: linear-gradient(135deg, #0f172a, #1e293b); min-height: 100vh; color: #e2e8f0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
header { background: rgba(15,23,42,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: #94a3b8; text-decoration: none; margin-left: 25px; font-weight: 600; }
nav a:hover { color: var(--primary); }
.hero { background: linear-gradient(135deg, var(--primary), #ea580c); padding: 80px 0; text-align: center; }
.hero h1 { font-size: 48px; color: #fff; margin-bottom: 10px; }
.hero p { font-size: 18px; color: #ffedd5; }
main { padding: 50px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.card { background: var(--card); border-radius: 16px; padding: 24px; text-align: center; transition: all 0.3s; border: 1px solid #334155; }
.card:hover { transform: translateY(-5px); border-color: var(--blue); box-shadow: 0 10px 30px rgba(249,115,22,0.2); }
.card .icon { font-size: 48px; margin-bottom: 12px; }
.card h3 { color: #f1f5f9; font-size: 15px; margin-bottom: 8px; }
.card a { display: inline-block; padding: 10px 22px; background: linear-gradient(135deg, var(--primary), var(--blue)); 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 #334155; }
.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: #94a3b8; text-align: center; margin-bottom: 25px; }
.tool-area { background: #0f172a; padding: 28px; border-radius: 12px; margin: 22px 0; }
.tool-area input { padding: 14px 18px; font-size: 15px; background: #1e293b; border: 2px solid #334155; 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: #1e293b; border: 2px solid #334155; border-radius: 10px; width: 200px; margin: 6px; color: #fff; }
.tool-area button { padding: 14px 28px; background: linear-gradient(135deg, var(--primary), var(--blue)); color: #fff; border: none; border-radius: 25px; font-weight: 700; cursor: pointer; margin: 6px; }
.result-box { background: linear-gradient(135deg, rgba(249,115,22,0.2), rgba(14,165,233,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(14,165,233,0.1); padding: 20px; border-radius: 12px; margin-top: 22px; border-left: 4px solid var(--blue); }
.rules h3 { color: var(--blue); margin-bottom: 12px; }
.rules li { color: #cbd5e1; 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: #64748b; text-align: center; margin-bottom: 30px; font-size: 14px; }
.article-page .content { line-height: 1.9; color: #cbd5e1; 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: #64748b; margin: 0 12px; }