:root {
    --color-bg: #f9fafb;
    --color-bg-white: #fff;
    --color-text: #111827;
    --color-text-secondary: #6b7280;
    --color-text-body: #374151;
    --color-border: #e5e7eb;
    --color-accent: #f97316;
    --color-accent-hover: #ea580c;
}

html { scrollbar-gutter: stable; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Inter', system-ui, sans-serif; 
    background: var(--color-bg); 
    color: var(--color-text); 
    line-height: 1.7; 
}

/* Header */
header { 
    background: var(--color-bg-white); 
    border-bottom: 1px solid var(--color-border); 
    padding: 12px 24px; 
}
.header-inner { 
    max-width: 1100px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.logo { 
    font-weight: 600; 
    color: var(--color-text); 
    text-decoration: none; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}
.logo img { width: 48px; height: 48px; }
header a { 
    color: var(--color-text-secondary); 
    text-decoration: none; 
    font-size: 14px; 
}
header a:hover { color: var(--color-text); }

/* Hero (index page) */
.hero { 
    background: var(--color-bg-white); 
    text-align: center; 
    padding: 56px 24px; 
    border-bottom: 1px solid var(--color-border); 
}
.hero h1 { font-size: 34px; margin-bottom: 12px; }
.hero p { color: var(--color-text-secondary); font-size: 18px; }

/* Main */
main { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }

/* Jobs list (index page) */
.jobs-header { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 16px; 
    font-size: 14px; 
}
.jobs-header h2 { font-size: 16px; }
.jobs-header span { color: var(--color-text-secondary); }

.job-card { 
    background: var(--color-bg-white); 
    border: 1px solid var(--color-border); 
    border-radius: 10px; 
    padding: 20px 24px; 
    text-decoration: none; 
    color: inherit; 
    display: block; 
    transition: border-color 0.2s, box-shadow 0.2s; 
}
.job-card:hover { 
    border-color: var(--color-accent); 
    box-shadow: 0 4px 12px rgba(249,115,22,0.08); 
}
.job-title { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.job-meta { font-size: 14px; color: var(--color-text-secondary); }

/* Back link (job page) */
.back { 
    color: var(--color-text-secondary); 
    text-decoration: none; 
    font-size: 14px; 
    display: inline-block; 
    margin-bottom: 24px; 
}
.back:hover { color: var(--color-text-secondary); }

/* Job header (job page) */
.job-header { 
    background: var(--color-bg-white); 
    border: 1px solid var(--color-border); 
    border-radius: 10px; 
    padding: 24px; 
    margin-bottom: 24px; 
    display: flex; 
    gap: 16px; 
    align-items: center; 
}
.job-header h1 { font-size: 22px; flex: 1; }

.apply-btn { 
    background: var(--color-accent); 
    color: #fff !important; 
    padding: 12px 24px; 
    border-radius: 8px; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 14px; 
}
.apply-btn:hover { background: var(--color-accent-hover); }

/* Content (job page) */
.content { 
    background: var(--color-bg-white); 
    border: 1px solid var(--color-border); 
    border-radius: 10px; 
    padding: 40px; 
}
.content h2 { 
    font-size: 20px; 
    margin: 40px 0 16px; 
    padding-top: 24px; 
    border-top: 1px solid var(--color-border); 
}
.content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.content p { color: var(--color-text-body); margin-bottom: 16px; }
.content ul, .content ol { margin: 0 0 16px 24px; color: var(--color-text-body); }
.content li { margin-bottom: 8px; }
.content ol > li { margin-bottom: 16px; }
.content ol > li > strong:first-child { display: block; margin-bottom: 6px; }
.content li ul { margin-top: 8px; margin-bottom: 8px; }
.content strong { color: var(--color-text); }
.content em { font-style: italic; }
.content a { color: var(--color-accent); }
.content hr { border: none; border-top: 1px solid var(--color-border); margin: 32px 0; }

.meta-info { margin-bottom: 24px; }
.meta-info p { margin-bottom: 8px; }

.cta { text-align: center; margin-top: 36px; margin-bottom: 16px; }

/* Footer */
footer { 
    text-align: center; 
    padding: 40px 24px; 
    color: var(--color-text-secondary); 
    font-size: 14px; 
}
footer a { color: var(--color-text-secondary); text-decoration: none; }

/* Responsive */
@media (max-width: 600px) {
    .job-header { flex-direction: column; align-items: stretch; }
    .job-header h1 { margin-bottom: 16px; }
    .apply-btn { text-align: center; }
    .content { padding: 24px; }
}