@charset "utf-8";

.chapter-container { max-width: 1200px; margin: 0px auto; padding: 20px; }

.chapter-header { background: rgba(30, 30, 30, 0.4); backdrop-filter: blur(10px); padding: 2rem; border-radius: 10px; margin-bottom: 2rem; border: rgba(102, 126, 234, 0.2); }

.chapter-header h1 { color: rgba(147, 197, 253, 0.95); margin-bottom: 0.5rem; }

.chapter-header .subtitle { color: rgba(255, 255, 255, 0.8); font-size: 1.1rem; }

.back-link { display: inline-block; margin-bottom: 1rem; padding: 0.5rem 1rem; background: rgb(102, 126, 234); color: white; text-decoration: none; border-radius: 5px; transition: background 0.3s; }

.back-link:hover { background: rgb(85, 104, 211); }

.content-section { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: rgba(102, 126, 234, 0.2); padding: 2rem; border-radius: 12px; margin-bottom: 2rem; color: rgb(229, 231, 235); }

.extended-section { margin: 2rem 0px; }

.highlight-block { background: rgba(102, 126, 234, 0.1); border: rgba(102, 126, 234, 0.3); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; position: relative; color: rgb(229, 231, 235); }

.block-header { display: flex; align-items: center; margin-bottom: 1rem; gap: 0.5rem; }

.block-header p { color: rgb(243, 244, 246); font-weight: 600; margin: 0px; }

.block-header strong { color: rgb(243, 244, 246); font-weight: 600; }

.block-icon { font-size: 1.2rem; background: rgba(102, 126, 234, 0.06); padding: 0.3rem; border-radius: 6px; display: inline-block; }

.format-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }

.format-option { border-radius: 8px; padding: 1rem; border: 2px solid; color: rgb(229, 231, 235); }

.format-option.recommended { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); }

.format-option.not-recommended { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }

.option-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }

.option-header h4 { color: rgb(243, 244, 246); margin: 0px; }

.status-badge { padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; }

.status-badge:not(.warning) { background: rgba(34, 197, 94, 0.06); color: rgb(134, 239, 172); }

.status-badge.warning { background: rgba(239, 68, 68, 0.06); color: rgb(252, 165, 165); }

.naming-pattern { margin-top: 1rem; }

.pattern-box { background: rgba(59, 130, 246, 0.1); border: rgba(59, 130, 246, 0.3); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; text-align: center; }

.pattern-box h4 { color: rgb(147, 197, 253); margin: 0px 0px 0.5rem; }

.pattern-code { background: rgba(59, 130, 246, 0.06); padding: 0.5rem 1rem; border-radius: 6px; font-family: "Courier New", monospace; font-weight: bold; color: rgb(219, 234, 254); display: inline-block; margin-top: 0.5rem; }

.examples-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.example-card { border-radius: 8px; padding: 1rem; border: 2px solid; color: rgb(229, 231, 235); }

.example-card.good { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); }

.example-card.bad { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }

.card-label { display: block; font-weight: bold; margin-bottom: 0.5rem; font-size: 0.9rem; color: rgb(243, 244, 246); }

.length-guide { margin-top: 1rem; }

.length-table { border-radius: 8px; overflow: hidden; border: 1px solid rgba(102, 126, 234, 0.3); }

.table-header { background: rgba(102, 126, 234, 0.06); display: grid; grid-template-columns: 1.5fr 1fr 2fr; padding: 1rem; font-weight: bold; border-bottom: 2px solid rgba(102, 126, 234, 0.3); color: rgb(243, 244, 246); }

.table-row { display: grid; grid-template-columns: 1.5fr 1fr 2fr; padding: 1rem; border-bottom: 1px solid rgba(102, 126, 234, 0.2); background: rgba(255, 255, 255, 0.02); color: rgb(229, 231, 235); }

.table-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.table-row:nth-child(2n) { background: rgba(102, 126, 234, 0.05); }

.exp-level { font-weight: 600; color: rgb(147, 197, 253); }

.page-count { font-weight: bold; color: rgb(134, 239, 172); }

.focus-area { color: rgb(209, 213, 219); }

.tips-block { background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 146, 60, 0.1)); border: 1px solid rgba(251, 191, 36, 0.3); border-radius: 8px; padding: 1.5rem; color: rgb(229, 231, 235); }

.tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.8rem; margin-top: 1rem; }

.tip-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem; border-radius: 6px; border: 1px solid; color: rgb(229, 231, 235); }

.tip-item.good { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.2); }

.tip-item.bad { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); }

.tip-icon { font-size: 1.1rem; flex-shrink: 0; }

.example { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 10px; padding: 1rem; margin: 1rem 0px; color: rgb(229, 231, 235); }

.example::before { content: "💡 示例"; position: absolute; top: -12px; left: 1rem; background: rgba(59, 130, 246, 0.15); color: white; padding: 0.3rem 0.8rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; }

.skill-showcase { background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 8px; padding: 1.5rem; margin-top: 1rem; }

.skill-category { margin-bottom: 1rem; }

.skill-category h4 { color: rgb(192, 132, 252); margin-bottom: 0.5rem; font-size: 1.1rem; }

.skill-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.skill-tag { background: rgba(168, 85, 247, 0.06); color: rgb(107, 33, 168); padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.9rem; border: 1px solid rgba(168, 85, 247, 0.3); }

@media (max-width: 768px) {
  .format-comparison, .examples-grid { grid-template-columns: 1fr; }
  .table-header, .table-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .tips-grid { grid-template-columns: 1fr; }
}

.personal-info-example { text-align: center; padding: 1rem; color: rgb(243, 244, 246); }

.name-section { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid rgba(59, 130, 246, 0.3); }

.candidate-name { font-size: 2rem; font-weight: bold; color: rgb(147, 197, 253); margin: 0px 0px 0.5rem; text-shadow: rgba(59, 130, 246, 0.3) 0px 0px 10px; }

.job-title { font-size: 1.1rem; color: rgb(209, 213, 219); margin: 0px; }

.contact-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }

.contact-item { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem; background: rgba(59, 130, 246, 0.05); border-radius: 6px; border: 1px solid rgba(59, 130, 246, 0.2); color: rgb(229, 231, 235); }

.contact-icon { font-size: 1.1rem; }

.education-example { padding: 1rem; color: rgb(243, 244, 246); }

.edu-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 2px solid rgba(59, 130, 246, 0.3); }

.school-info { flex: 1 1 0%; }

.school-name { font-size: 1.3rem; font-weight: bold; color: rgb(147, 197, 253); margin: 0px 0px 0.5rem; }

.major-info { color: rgb(209, 213, 219); margin: 0px; }

.graduation-time { background: rgba(59, 130, 246, 0.1); color: rgb(147, 197, 253); padding: 0.5rem 1rem; border-radius: 6px; font-weight: 600; border: 1px solid rgba(59, 130, 246, 0.3); white-space: nowrap; }

.achievements { display: grid; gap: 0.8rem; }

.achievement-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem; background: rgba(34, 197, 94, 0.05); border-radius: 6px; border: 1px solid rgba(34, 197, 94, 0.2); color: rgb(229, 231, 235); }

.achievement-icon { font-size: 1.2rem; flex-shrink: 0; }

.skill-tag { background: rgba(168, 85, 247, 0.06); color: rgb(229, 231, 235); padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.9rem; border: 1px solid rgba(168, 85, 247, 0.3); transition: 0.3s; font-weight: 500; }

.skill-tag:hover { background: rgba(168, 85, 247, 0.09); transform: translateY(-2px); color: rgb(243, 244, 246); }

.content-block { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; transition: 0.3s; color: rgb(229, 231, 235); }

.content-block:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(102, 126, 234, 0.3); transform: translateY(-2px); }

.resume-module { background: linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(31, 41, 55, 0.9)); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 12px; padding: 2rem; margin: 1.5rem 0px; position: relative; color: rgb(243, 244, 246); }

.resume-module::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; height: 4px; background: linear-gradient(90deg, rgb(59, 130, 246), rgb(139, 92, 246), rgb(236, 72, 153)); border-radius: 12px 12px 0px 0px; }

.resume-module-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid rgba(59, 130, 246, 0.2); }

.resume-module-icon { background: linear-gradient(135deg, rgb(59, 130, 246), rgb(139, 92, 246)); color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }

.resume-module-title { color: rgb(96, 165, 250); font-size: 1.3rem; font-weight: 600; margin: 0px; }

.resume-module-content { color: rgb(209, 213, 219); line-height: 1.6; }

.resume-module-content strong { color: rgb(147, 197, 253); font-weight: 600; }

.personal-info-module { background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(124, 58, 237, 0.1)); border: 1px solid rgba(37, 99, 235, 0.3); border-radius: 12px; padding: 2rem; margin: 1.5rem 0px; text-align: center; position: relative; color: rgb(243, 244, 246); }

.personal-info-module::after { content: "个人信息模板"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, rgb(37, 99, 235), rgb(124, 58, 237)); color: white; padding: 0.3rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }

.skills-module { background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(236, 72, 153, 0.1)); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 12px; padding: 2rem; margin: 1.5rem 0px; position: relative; color: rgb(243, 244, 246); }

.skills-module::after { content: "技能清单模板"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, rgb(168, 85, 247), rgb(236, 72, 153)); color: white; padding: 0.3rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }

.experience-module { background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.1)); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 12px; padding: 2rem; margin: 1.5rem 0px; position: relative; color: rgb(243, 244, 246); }

.experience-module::after { content: "工作经验模板"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, rgb(34, 197, 94), rgb(16, 185, 129)); color: white; padding: 0.3rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }

.subsection h3 { color: rgba(255, 255, 255, 0.95); font-size: 1.3rem; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(102, 126, 234, 0.4); position: relative; }

.subsection h3::before { content: ""; position: absolute; bottom: -2px; left: 0px; width: 60px; height: 2px; background: linear-gradient(90deg, rgb(102, 126, 234), transparent); }

.content-block ul { list-style: none; padding: 0px; color: rgb(209, 213, 219); }

.content-block ul li { padding: 0.5rem 0px 0.5rem 1.5rem; border-bottom: 1px solid rgba(102, 126, 234, 0.1); position: relative; color: rgb(209, 213, 219); }

.content-block ul li::before { content: "▸"; position: absolute; left: 0px; color: rgb(96, 165, 250); font-weight: bold; }

.content-block ul li:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.content-block strong { color: rgb(147, 197, 253); font-weight: 600; }

.content-block p { color: rgb(209, 213, 219); line-height: 1.6; }

@media (max-width: 768px) {
  .contact-section { grid-template-columns: 1fr; }
  .edu-header { flex-direction: column; gap: 1rem; }
  .graduation-time { align-self: flex-start; }
  .candidate-name { font-size: 1.5rem; }
  .skill-tags { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

.template-showcase { margin-top: 1rem; }

.template-card { background: rgba(59, 130, 246, 0.05); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 12px; padding: 1.5rem; transition: 0.3s; }

.template-card:hover { background: rgba(59, 130, 246, 0.1); transform: translateY(-2px); }

.template-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid rgba(59, 130, 246, 0.2); }

.template-header h4 { color: rgba(147, 197, 253, 0.95); font-size: 1.2rem; margin: 0px; }

.template-badge { background: rgba(34, 197, 94, 0.06); color: rgb(22, 163, 74); padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.8rem; font-weight: bold; border: 1px solid rgba(34, 197, 94, 0.3); }

.template-structure { display: grid; gap: 0.8rem; }

.structure-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border: 1px solid rgba(59, 130, 246, 0.2); transition: 0.3s; }

.structure-item:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(5px); }

.item-order { background: linear-gradient(135deg, rgb(102, 126, 234), rgb(118, 75, 162)); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; flex-shrink: 0; }

.item-title { font-weight: 600; color: rgb(102, 126, 234); min-width: 100px; flex-shrink: 0; }

.item-desc { color: rgb(107, 114, 128); font-size: 0.9rem; }

.writing-tips { margin-top: 1rem; }

.tip-category h4 { color: rgb(102, 126, 234); margin-bottom: 1rem; font-size: 1.1rem; }

.star-method { display: grid; gap: 1rem; }

.star-item { display: flex; gap: 1rem; padding: 1.2rem; background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05)); border-radius: 10px; border: 1px solid rgba(102, 126, 234, 0.2); transition: 0.3s; }

.star-item:hover { background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)); transform: translateY(-2px); }

.star-letter { background: linear-gradient(135deg, rgb(102, 126, 234), rgb(118, 75, 162)); color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem; flex-shrink: 0; }

.star-item strong { color: rgb(102, 126, 234); font-size: 1rem; }

.star-item p { color: rgb(107, 114, 128); margin: 0.3rem 0px 0px; font-size: 0.9rem; }

.faq-section { margin-top: 1rem; }

.faq-item { margin-bottom: 1.5rem; border: 1px solid rgba(102, 126, 234, 0.2); border-radius: 12px; overflow: hidden; transition: 0.3s; }

.faq-item:hover { border-color: rgba(102, 126, 234, 0.4); }

.faq-question { background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)); padding: 1rem; display: flex; align-items: center; gap: 1rem; border-bottom: 2px solid rgba(102, 126, 234, 0.2); }

.faq-answer { padding: 1rem; display: flex; gap: 1rem; }

.faq-icon { background: linear-gradient(135deg, rgb(102, 126, 234), rgb(118, 75, 162)); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; flex-shrink: 0; }

.faq-question span:not(.faq-icon) { font-weight: 600; color: rgb(102, 126, 234); font-size: 1.1rem; }

.faq-answer p { margin: 0px 0px 0.8rem; color: rgb(229, 231, 235); }

.faq-answer p:last-child { margin-bottom: 0px; }

.faq-answer strong { color: rgb(102, 126, 234); }

.faq-answer ul { margin: 0.5rem 0px; padding-left: 1rem; }

.faq-answer li { color: rgb(209, 213, 219); margin: 0.3rem 0px; }

.warning { background: rgba(239, 68, 68, 0.1); border-left: 4px solid rgba(239, 68, 68, 0.5); padding: 0.8rem; border-radius: 6px; color: rgb(252, 165, 165); font-size: 0.9rem; margin-top: 0.8rem; }

@media (max-width: 768px) {
  .template-header { flex-direction: column; gap: 0.5rem; text-align: center; }
  .structure-item { flex-direction: column; text-align: center; gap: 0.5rem; }
  .item-title { min-width: auto; }
  .star-item { flex-direction: column; text-align: center; gap: 0.8rem; }
  .faq-question, .faq-answer { flex-direction: column; text-align: left; gap: 0.8rem; }
}

.content-section h2 { color: rgb(255, 255, 255); margin-bottom: 1rem; border-bottom: 2px solid rgba(102, 126, 234, 0.5); padding-bottom: 0.8rem; text-shadow: rgba(102, 126, 234, 0.5) 0px 0px 10px; }

.content-section h3 { color: rgba(255, 255, 255, 0.9); margin-top: 1.5rem; margin-bottom: 0.8rem; }

.content-section p { margin-bottom: 1rem; line-height: 1.8; color: rgba(255, 255, 255, 0.8); }

.content-section ul, .content-section ol { margin-left: 2rem; margin-bottom: 1rem; }

.content-section li { margin-bottom: 0.5rem; color: rgba(255, 255, 255, 0.75); }

.demo-section { background: rgba(30, 30, 30, 0.4); backdrop-filter: blur(10px); padding: 2rem; border-radius: 10px; margin-bottom: 2rem; border: 1px solid rgba(102, 126, 234, 0.2); }

.demo-section h2 { color: rgba(147, 197, 253, 0.95); margin-bottom: 1rem; }

.demo-box { border: 1px solid rgba(102, 126, 234, 0.3); border-radius: 8px; padding: 2rem; background: rgba(30, 30, 30, 0.3); backdrop-filter: blur(10px); margin-bottom: 1rem; color: rgba(255, 255, 255, 0.9); }

.demo-box * { color: rgba(255, 255, 255, 0.9); }

.demo-box strong { color: rgba(255, 255, 255, 0.95); }

.demo-result { background: rgba(30, 30, 30, 0.4); backdrop-filter: blur(10px); border: 1px solid rgba(102, 126, 234, 0.5); border-radius: 8px; padding: 1.5rem; margin-top: 1rem; min-height: 100px; color: rgba(255, 255, 255, 0.9); }

.demo-result * { color: rgba(255, 255, 255, 0.9); }

.interactive-demo { background: rgba(30, 30, 30, 0.4); backdrop-filter: blur(10px); padding: 2rem; border-radius: 10px; margin-bottom: 2rem; border: 1px solid rgba(102, 126, 234, 0.2); color: rgba(255, 255, 255, 0.9); }

.interactive-demo * { color: rgba(255, 255, 255, 0.9); }

.interactive-demo label { color: rgba(255, 255, 255, 0.9); }

.interactive-demo h3 { color: rgba(147, 197, 253, 0.95); margin-bottom: 1rem; }

.demo-controls { margin-bottom: 1.5rem; }

.demo-controls button { background: rgb(102, 126, 234); color: white; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0.8rem 1.5rem; border-radius: 5px; cursor: pointer; font-size: 1rem; margin-right: 0.5rem; margin-bottom: 0.5rem; transition: background 0.3s; }

.demo-controls button:hover { background: rgb(85, 104, 211); }

.demo-controls input[type="text"], .demo-controls input[type="number"], .demo-controls input[type="color"], .demo-controls select { padding: 0.8rem; border: 2px solid rgba(102, 126, 234, 0.4); border-radius: 5px; font-size: 1rem; margin-right: 0.5rem; margin-bottom: 0.5rem; background: rgba(30, 30, 30, 0.9); color: rgb(224, 224, 224); }

.demo-controls select option { background: rgb(30, 30, 30); color: rgb(224, 224, 224); }

.tip-box { background: rgba(59, 130, 246, 0.15); backdrop-filter: blur(10px); border-left: 4px solid rgba(59, 130, 246, 0.8); padding: 1rem 1.5rem; border-radius: 5px; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.9); }

.tip-box strong { color: rgba(147, 197, 253, 0.95); }

.warning-box { background: rgba(251, 191, 36, 0.15); backdrop-filter: blur(10px); border-left: 4px solid rgba(251, 191, 36, 0.8); padding: 1rem 1.5rem; border-radius: 5px; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.9); }

.warning-box strong { color: rgba(253, 230, 138, 0.95); }

.chapter-navigation { display: flex; justify-content: space-between; margin-top: 2rem; gap: 1rem; position: relative; z-index: 10; }

.nav-button { padding: 1rem 2rem; background: rgb(102, 126, 234); color: white; text-decoration: none; border-radius: 5px; transition: background 0.3s; text-align: center; flex: 1 1 0%; cursor: pointer; display: block; }

.nav-button:hover { background: rgb(85, 104, 211); }

.nav-button.disabled { background: rgb(204, 204, 204); cursor: not-allowed; pointer-events: none; }

table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }

table th, table td { border: 1px solid rgba(102, 126, 234, 0.3); padding: 0.8rem; text-align: left; }

table th { background: rgb(102, 126, 234); color: white; }

table tr:nth-child(2n) { background: rgba(102, 126, 234, 0.15); }

table tr:nth-child(2n+1) { background: rgba(102, 126, 234, 0.08); }

table td { color: rgba(255, 255, 255, 0.9); }

.interview-hero { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); border: 1px solid rgba(102, 126, 234, 0.3); border-radius: 20px; padding: 3rem 2.5rem; margin-bottom: 3rem; position: relative; overflow: hidden; }

.interview-hero::before { content: ""; position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent); animation: 3s ease 0s infinite normal none running heroShine; }

@keyframes heroShine { 
  0% { left: -100%; }
  100% { left: 200%; }
}

.interview-hero h1 { color: rgb(255, 255, 255); font-size: 2.5rem; text-align: center; margin-bottom: 1rem; text-shadow: rgba(102, 126, 234, 0.8) 0px 0px 20px, rgba(102, 126, 234, 0.5) 0px 0px 40px; animation: 2s ease-in-out 0s infinite normal none running titleGlow; position: relative; z-index: 1; }

@keyframes titleGlow { 
  0%, 100% { text-shadow: rgba(102, 126, 234, 0.8) 0px 0px 20px, rgba(102, 126, 234, 0.5) 0px 0px 40px; }
  50% { text-shadow: rgb(102, 126, 234) 0px 0px 30px, rgba(102, 126, 234, 0.7) 0px 0px 60px; }
}

.hero-subtitle { color: rgba(255, 255, 255, 0.9); font-size: 1.3rem; text-align: center; margin-bottom: 0.8rem; position: relative; z-index: 1; }

.hero-desc { color: rgba(255, 255, 255, 0.7); font-size: 1rem; text-align: center; margin-bottom: 0px; position: relative; z-index: 1; }

.interview-roadmap { margin-top: 3rem; padding: 0px; }

.section-title { color: rgb(255, 255, 255); font-size: 1.8rem; font-weight: 700; text-align: center; margin: 0px 0px 0.8rem; text-shadow: rgba(102, 126, 234, 0.6) 0px 0px 20px; }

.section-subtitle { color: rgba(255, 255, 255, 0.8); font-size: 1rem; text-align: center; margin: 0px 0px 2.5rem; }

.roadmap-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }

.roadmap-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(102, 126, 234, 0.3); border-radius: 16px; padding: 2rem 1.5rem; text-decoration: none; color: inherit; display: block; position: relative; transition: 0.3s; }

.roadmap-card:hover { transform: translateY(-8px); border-color: rgba(102, 126, 234, 0.6); }

.card-icon { font-size: 3rem; text-align: center; margin-bottom: 1rem; filter: drop-shadow(rgba(102, 126, 234, 0.5) 0px 0px 10px); }

.card-number { display: inline-block; padding: 0.3rem 0.8rem; background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3)); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(102, 126, 234, 0.5); border-radius: 20px; font-size: 0.85rem; font-weight: 600; margin-bottom: 1rem; }

.card-title { font-size: 1.2rem; font-weight: 700; color: rgb(255, 255, 255); margin: 0px 0px 0.8rem; text-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px; }

.card-desc { font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); line-height: 1.6; margin: 0px; }

.card-arrow { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: rgba(102, 126, 234, 0.8); opacity: 0; transition: 0.3s; text-shadow: rgba(102, 126, 234, 0.8) 0px 0px 10px; }

.roadmap-card:hover .card-arrow { opacity: 1; right: 1rem; }

.roadmap-tip { text-align: center; color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; padding: 1rem; background: rgba(102, 126, 234, 0.1); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: 8px; backdrop-filter: blur(10px); }

@media (max-width: 768px) {
  .interview-hero { padding: 2rem 1.5rem; }
  .interview-hero h1 { font-size: 2rem; }
  .hero-subtitle { font-size: 1.1rem; }
  .section-title { font-size: 1.5rem; }
  .section-subtitle { font-size: 0.9rem; }
  .roadmap-cards { grid-template-columns: 1fr; gap: 1.2rem; }
  .card-icon { font-size: 2.5rem; }
  .card-arrow { display: none; }
}

.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }

.topic-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: 12px; padding: 1.5rem; transition: 0.3s; }

.topic-card:hover { border-color: rgba(102, 126, 234, 0.5); transform: translateY(-4px); }

.topic-card h3 { color: rgb(255, 255, 255); font-size: 1.1rem; margin: 0px 0px 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(102, 126, 234, 0.2); }

.topic-card ul { list-style: none; padding: 0px; margin: 0px; }

.topic-card li { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; padding: 0.4rem 0px 0.4rem 1.2rem; position: relative; }

.topic-card li::before { content: "▹"; position: absolute; left: 0px; color: rgba(102, 126, 234, 0.6); }

.topic-card .chapter-link { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.2s; display: inline; padding: 0px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }

.topic-card .chapter-link:hover { color: rgba(102, 126, 234, 0.9); text-decoration: underline; }

.section-intro { color: rgba(255, 255, 255, 0.8); font-size: 1rem; line-height: 1.8; margin-top: 1rem; }

.tips-box { background: rgba(102, 126, 234, 0.1); border: 1px solid rgba(102, 126, 234, 0.3); border-radius: 12px; padding: 1.5rem; margin-top: 1.5rem; }

.tips-box p { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; line-height: 1.8; margin: 0.8rem 0px; }

.tips-box strong { color: rgba(102, 126, 234, 0.9); }

.chapter-footer { margin-top: 3rem; padding: 2rem 0px; border-top: 2px solid rgba(102, 126, 234, 0.2); text-align: center; }

.chapter-footer .copyright-warning { font-size: 0.95rem; color: rgb(220, 53, 69); font-weight: 600; padding: 0.8rem 1.5rem; background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); border-radius: 8px; display: inline-block; margin-bottom: 1rem; animation: 2s ease-in-out 0s infinite normal none running warningPulse; }

@keyframes warningPulse { 
  0%, 100% { }
  50% { }
}

.chapter-footer .copyright-text { color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; margin: 0px; }

@media (max-width: 768px) {
  .chapter-container { padding: 10px; }
  .content-section, .demo-section, .interactive-demo { padding: 1rem; }
  .chapter-navigation { flex-direction: column; }
  .chapter-footer .copyright-warning { font-size: 0.85rem; padding: 0.6rem 1rem; }
  .page-navigation .nav-btn { padding: 0.8rem 1.5rem; font-size: 0.9rem; }
}

.page-navigation { display: flex; justify-content: space-between; align-items: center; margin: 3rem auto 2rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: rgba(102, 126, 234, 0.2); border-radius: 12px; max-width: 1200px; }

.nav-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; background: linear-gradient(135deg, rgb(102, 126, 234) 0%, rgb(118, 75, 162) 100%); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; transition: 0.3s; max-width: 300px; white-space: normal; word-break: break-word; }

.nav-btn:hover { transform: translateY(-2px); }

.nav-btn.disabled { opacity: 0.3; pointer-events: none; cursor: not-allowed; }

.nav-btn svg { width: 20px; height: 20px; }

.nav-center { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; }

.writing-principles { display: grid; gap: 1rem; }

.principle-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border: rgba(102, 126, 234, 0.2); color: rgb(229, 231, 235); }

.principle-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.2rem; }

.principle-item strong { color: rgb(147, 197, 253); display: block; margin-bottom: 0.3rem; }

.principle-item p { color: rgb(209, 213, 219); margin: 0px; line-height: 1.5; }

.jd-analysis { display: grid; gap: 1rem; margin-top: 1rem; }

.analysis-step { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: rgba(59, 130, 246, 0.1); border-radius: 8px; border: rgba(59, 130, 246, 0.3); color: rgb(229, 231, 235); }

.step-number { background: linear-gradient(135deg, rgb(59, 130, 246), rgb(139, 92, 246)); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; }

.step-content h4 { color: rgb(147, 197, 253); margin: 0px 0px 0.3rem; }

.step-content p { color: rgb(209, 213, 219); margin: 0px; }

.conciseness-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }

.rule-card { padding: 1.5rem; border-radius: 8px; border: 2px solid; color: rgb(229, 231, 235); }

.rule-card.good { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); }

.rule-card.bad { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }

.rule-card h4 { display: flex; align-items: center; gap: 0.5rem; margin: 0px 0px 1rem; color: rgb(243, 244, 246); }

.rule-card ul { list-style: none; padding: 0px; margin: 0px; }

.rule-card li { padding: 0.3rem 0px 0.3rem 1rem; color: rgb(209, 213, 219); position: relative; }

.rule-card li::before { content: "•"; position: absolute; left: 0px; color: rgb(147, 197, 253); }

.title-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }

.example-title { padding: 1rem; border-radius: 8px; border: 2px solid; color: rgb(229, 231, 235); }

.example-title.bad { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }

.example-title.good { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); }

.example-label { display: block; font-weight: bold; margin-bottom: 0.8rem; color: rgb(243, 244, 246); }

.title-item { padding: 0.5rem; margin: 0.3rem 0px; background: rgba(255, 255, 255, 0.05); border-radius: 4px; font-family: "Courier New", monospace; color: rgb(209, 213, 219); }

.title-tips { display: grid; gap: 0.8rem; margin-top: 1.5rem; }

.star-examples { margin-top: 1rem; }

.star-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.comparison-bad, .comparison-good { padding: 1.5rem; border-radius: 8px; border: 2px solid; color: rgb(229, 231, 235); }

.comparison-bad { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }

.comparison-good { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); }

.comparison-bad h4, .comparison-good h4 { margin: 0px 0px 1rem; color: rgb(243, 244, 246); }

.example-content p { margin: 0.5rem 0px; color: rgb(209, 213, 219); line-height: 1.5; }

.verb-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem; }

.verb-category { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 1rem; border: rgba(102, 126, 234, 0.2); }

.verb-category h4 { color: rgb(147, 197, 253); margin: 0px 0px 0.8rem; }

.verb-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.verb-tag { background: rgba(168, 85, 247, 0.06); color: rgb(229, 231, 235); padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.9rem; border: rgba(168, 85, 247, 0.3); }

.skill-levels { display: grid; gap: 1.5rem; margin-top: 1rem; }

.skill-level { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 1.5rem; border: rgba(102, 126, 234, 0.2); }

.skill-level h4 { color: rgb(147, 197, 253); margin: 0px 0px 0.5rem; }

.skill-level p { color: rgb(209, 213, 219); margin: 0px 0px 1rem; }

.skill-examples { display: grid; gap: 0.5rem; }

.skill-item { padding: 0.5rem; background: rgba(59, 130, 246, 0.1); border-radius: 4px; border-left: 3px solid rgb(59, 130, 246); color: rgb(229, 231, 235); }

.graduate-strategy { display: grid; gap: 1rem; margin-top: 1rem; }

.strategy-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border: rgba(102, 126, 234, 0.2); color: rgb(229, 231, 235); }

.strategy-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.2rem; }

.strategy-item h4 { color: rgb(147, 197, 253); margin: 0px 0px 0.5rem; }

.strategy-item ul { list-style: none; padding: 0px; margin: 0px; }

.strategy-item li { padding: 0.2rem 0px 0.2rem 1rem; color: rgb(209, 213, 219); position: relative; }

.strategy-item li::before { content: "•"; position: absolute; left: 0px; color: rgb(147, 197, 253); }

.career-change-tips { display: grid; gap: 1rem; margin-top: 1rem; }

.tip-category { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 1rem; border: rgba(102, 126, 234, 0.2); }

.tip-category h4 { color: rgb(147, 197, 253); margin: 0px 0px 0.5rem; }

.tip-category p { color: rgb(209, 213, 219); margin: 0px 0px 0.8rem; }

.tip-category .example { background: rgba(59, 130, 246, 0.1); padding: 0.8rem; border-radius: 4px; border-left: 3px solid rgb(59, 130, 246); color: rgb(229, 231, 235); }

.tip-category .example strong { color: rgb(147, 197, 253); }

.senior-strategy { display: grid; gap: 1rem; margin-top: 1rem; }

.strategy-focus { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 1rem; border: rgba(102, 126, 234, 0.2); }

.strategy-focus h4 { color: rgb(147, 197, 253); margin: 0px 0px 0.8rem; }

.focus-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.focus-item { background: rgba(168, 85, 247, 0.06); color: rgb(229, 231, 235); padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.9rem; border: rgba(168, 85, 247, 0.3); }

.comparison-showcase { margin-top: 1rem; }

.comparison-item { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.comparison-before, .comparison-after { padding: 1.5rem; border-radius: 8px; border: 2px solid; color: rgb(229, 231, 235); }

.comparison-before { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }

.comparison-after { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); }

.comparison-before h4, .comparison-after h4 { margin: 0px 0px 1rem; color: rgb(243, 244, 246); }

.before-content, .after-content { color: rgb(209, 213, 219); }

.before-content p, .after-content p { margin: 0.5rem 0px; line-height: 1.5; }

.after-content strong { color: rgb(147, 197, 253); }

.error-corrections { display: grid; gap: 1.5rem; margin-top: 1rem; }

.error-item { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 1.5rem; border: rgba(102, 126, 234, 0.2); }

.error-bad, .error-good { padding: 1rem; border-radius: 6px; margin-bottom: 0.8rem; }

.error-bad { background: rgba(239, 68, 68, 0.1); border: rgba(239, 68, 68, 0.3); }

.error-good { background: rgba(34, 197, 94, 0.1); border: rgba(34, 197, 94, 0.3); }

.error-bad h4, .error-good h4 { margin: 0px 0px 0.5rem; color: rgb(243, 244, 246); }

.error-bad p, .error-good p { margin: 0px; color: rgb(209, 213, 219); }

.error-explanation { background: rgba(59, 130, 246, 0.1); padding: 0.8rem; border-radius: 4px; border-left: 3px solid rgb(59, 130, 246); color: rgb(229, 231, 235); }

.error-explanation strong { color: rgb(147, 197, 253); }

.project-levels { display: grid; gap: 1rem; margin-top: 1rem; }

.level-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border: rgba(102, 126, 234, 0.2); color: rgb(229, 231, 235); }

.level-number { background: linear-gradient(135deg, rgb(59, 130, 246), rgb(139, 92, 246)); color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; flex-shrink: 0; }

.level-content h4 { color: rgb(147, 197, 253); margin: 0px 0px 0.5rem; }

.level-content p { color: rgb(209, 213, 219); margin: 0px 0px 0.8rem; }

.level-example { background: rgba(59, 130, 246, 0.1); padding: 0.8rem; border-radius: 4px; border-left: 3px solid rgb(59, 130, 246); color: rgb(229, 231, 235); }

.level-example strong { color: rgb(147, 197, 253); }

.business-thinking { display: grid; gap: 1rem; margin-top: 1rem; }

.thinking-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border: rgba(102, 126, 234, 0.2); color: rgb(229, 231, 235); }

.thinking-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.2rem; }

.thinking-item strong { color: rgb(147, 197, 253); display: block; margin-bottom: 0.3rem; }

.thinking-item p { color: rgb(209, 213, 219); margin: 0px 0px 0.8rem; }

.thinking-item .example { background: rgba(59, 130, 246, 0.1); padding: 0.8rem; border-radius: 4px; border-left: 3px solid rgb(59, 130, 246); color: rgb(229, 231, 235); font-family: "Courier New", monospace; font-size: 0.9rem; }

.star-detailed { display: grid; gap: 1.5rem; margin-top: 1rem; }

.star-component { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 1.5rem; border: rgba(102, 126, 234, 0.2); color: rgb(229, 231, 235); }

.star-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }

.star-letter { background: linear-gradient(135deg, rgb(59, 130, 246), rgb(139, 92, 246)); color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; flex-shrink: 0; }

.star-header h4 { color: rgb(147, 197, 253); margin: 0px; }

.star-content p { color: rgb(209, 213, 219); margin: 0px 0px 0.8rem; }

.star-content ul { list-style: none; padding: 0px; margin: 0px 0px 1rem; }

.star-content li { padding: 0.3rem 0px 0.3rem 1rem; color: rgb(209, 213, 219); position: relative; }

.star-content li::before { content: "•"; position: absolute; left: 0px; color: rgb(147, 197, 253); }

.star-example { background: rgba(59, 130, 246, 0.1); padding: 0.8rem; border-radius: 4px; border-left: 3px solid rgb(59, 130, 246); color: rgb(229, 231, 235); }

.star-example strong { color: rgb(147, 197, 253); }

.quantification-guide { display: grid; gap: 1.5rem; margin-top: 1rem; }

.quant-category { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 1.5rem; border: rgba(102, 126, 234, 0.2); }

.quant-category h4 { color: rgb(147, 197, 253); margin: 0px 0px 1rem; }

.quant-examples { display: grid; gap: 0.8rem; }

.quant-item { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem; background: rgba(59, 130, 246, 0.1); border-radius: 4px; border-left: 3px solid rgb(59, 130, 246); color: rgb(229, 231, 235); }

.quant-label { color: rgb(209, 213, 219); font-weight: 500; }

.quant-value { color: rgb(147, 197, 253); font-weight: bold; }

.technical-challenges { margin-top: 1rem; }

.challenge-template { margin-bottom: 2rem; }

.challenge-template h4 { color: rgb(147, 197, 253); margin: 0px 0px 1rem; }

.template-structure { display: grid; gap: 0.8rem; }

.structure-item { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px; border: rgba(102, 126, 234, 0.2); color: rgb(229, 231, 235); }

.item-label { color: rgb(147, 197, 253); font-weight: bold; }

.item-desc { color: rgb(209, 213, 219); }

.challenge-examples { margin-top: 2rem; }

.challenge-examples h4 { color: rgb(147, 197, 253); margin: 0px 0px 1rem; }

.challenge-item { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; border: rgba(102, 126, 234, 0.2); color: rgb(229, 231, 235); }

.challenge-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }

.challenge-icon { font-size: 1.2rem; }

.challenge-header h5 { color: rgb(147, 197, 253); margin: 0px; }

.challenge-content p { color: rgb(209, 213, 219); margin: 0.5rem 0px; line-height: 1.5; }

.challenge-content strong { color: rgb(147, 197, 253); }

.highlight-methods { display: grid; gap: 1.5rem; margin-top: 1rem; }

.method-category { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 1.5rem; border: rgba(102, 126, 234, 0.2); }

.method-category h4 { color: rgb(147, 197, 253); margin: 0px 0px 1rem; }

.method-items { display: grid; gap: 0.8rem; }

.method-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem; background: rgba(59, 130, 246, 0.1); border-radius: 4px; border-left: 3px solid rgb(59, 130, 246); color: rgb(229, 231, 235); }

.method-icon { font-size: 1.1rem; flex-shrink: 0; }

.business-project-strategy { display: grid; gap: 1rem; margin-top: 1rem; }

.project-example { margin-top: 1rem; }

.example-title { margin-bottom: 1rem; }

.example-title h4 { color: rgb(147, 197, 253); margin: 0px; }

.example-content { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 1.5rem; border: rgba(102, 126, 234, 0.2); }

.example-content .content-section { background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; margin-bottom: 1rem; }

.example-content h5 { color: rgb(147, 197, 253); margin: 0px 0px 0.5rem; }

.example-content p { color: rgb(209, 213, 219); margin: 0px 0px 0.8rem; line-height: 1.5; }

.example-content ul { list-style: none; padding: 0px; margin: 0px; }

.example-content li { padding: 0.3rem 0px 0.3rem 1rem; color: rgb(209, 213, 219); position: relative; }

.example-content li::before { content: "•"; position: absolute; left: 0px; color: rgb(147, 197, 253); }

.platform-project-strategy { display: grid; gap: 1rem; margin-top: 1rem; }

.personal-project-tips { display: grid; gap: 1.5rem; margin-top: 1rem; }

.personal-project-tips .tip-category { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 1.5rem; border: rgba(102, 126, 234, 0.2); }

.personal-project-tips h4 { color: rgb(147, 197, 253); margin: 0px 0px 1rem; }

.personal-project-tips ul { list-style: none; padding: 0px; margin: 0px; }

.personal-project-tips li { padding: 0.3rem 0px 0.3rem 1rem; color: rgb(209, 213, 219); position: relative; }

.personal-project-tips li::before { content: "•"; position: absolute; left: 0px; color: rgb(147, 197, 253); }

.interviewer-questions { display: grid; gap: 1.5rem; margin-top: 1rem; }

.question-category { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 1.5rem; border: rgba(102, 126, 234, 0.2); }

.question-category h4 { color: rgb(147, 197, 253); margin: 0px 0px 1rem; }

.question-list { display: grid; gap: 0.8rem; }

.question-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem; background: rgba(59, 130, 246, 0.1); border-radius: 4px; border-left: 3px solid rgb(59, 130, 246); color: rgb(229, 231, 235); }

.question-icon { background: linear-gradient(135deg, rgb(59, 130, 246), rgb(139, 92, 246)); color: white; width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8rem; flex-shrink: 0; }

@media (max-width: 768px) {
  .conciseness-rules { grid-template-columns: 1fr; }
  .title-examples { grid-template-columns: 1fr; }
  .star-comparison { grid-template-columns: 1fr; }
  .verb-categories { grid-template-columns: 1fr; }
  .comparison-item { grid-template-columns: 1fr; }
  .project-levels { gap: 0.8rem; }
  .level-item { flex-direction: column; text-align: center; }
  .quantification-guide { gap: 1rem; }
  .highlight-methods { gap: 1rem; }
  .business-thinking { gap: 0.8rem; }
  .thinking-item { flex-direction: column; text-align: center; }
  .star-detailed { gap: 1rem; }
  .star-header { flex-direction: column; text-align: center; }
  .technical-challenges { gap: 1rem; }
  .challenge-item { padding: 1rem; }
  .challenge-header { flex-direction: column; text-align: center; }
  .interviewer-questions { gap: 1rem; }
  .question-item { flex-direction: column; text-align: center; }
  .strategy-item { flex-direction: column; text-align: center; }
  .graduate-strategy { gap: 0.8rem; }
  .senior-strategy { gap: 0.8rem; }
  .focus-items { justify-content: center; }
  .career-change-tips { gap: 0.8rem; }
  .error-corrections { gap: 1rem; }
  .error-item { padding: 1rem; }
}

.hr-dimensions { display: grid; gap: 1.5rem; margin-top: 1rem; }

.dimension-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 12px; border: rgba(255, 255, 255, 0.1); transition: 0.3s; }

.dimension-item:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }

.dimension-icon { font-size: 2rem; flex-shrink: 0; }

.dimension-details { margin-top: 0.5rem; padding: 0.5rem; background: rgba(59, 130, 246, 0.1); border-radius: 6px; font-size: 0.9rem; }

.misconceptions { display: grid; gap: 1rem; margin-top: 1rem; }

.misconception-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: rgba(239, 68, 68, 0.1); border-radius: 8px; border-left: 4px solid rgb(239, 68, 68); }

.misconception-icon { font-size: 1.5rem; flex-shrink: 0; }

.process-features { display: grid; gap: 2rem; margin-top: 1rem; }

.feature-category { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; }

.feature-category h4 { color: rgb(147, 197, 253); margin-bottom: 1rem; font-size: 1.1rem; }

.feature-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; }

.feature-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem; background: rgba(255, 255, 255, 0.05); border-radius: 6px; transition: 0.3s; }

.feature-item:hover { background: rgba(255, 255, 255, 0.08); }

.feature-icon { font-size: 1.2rem; }

.introduction-formula { margin-top: 1rem; }

.formula-structure { display: grid; gap: 1.5rem; }

.structure-step { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 12px; border: rgba(255, 255, 255, 0.1); }

.step-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: linear-gradient(135deg, rgb(59, 130, 246), rgb(29, 78, 216)); color: white; border-radius: 50%; font-weight: bold; flex-shrink: 0; }

.example { margin-top: 0.5rem; padding: 0.8rem; background: rgba(34, 197, 94, 0.1); border-radius: 6px; font-size: 0.9rem; border-left: 3px solid rgb(34, 197, 94); }

.introduction-tips { margin-top: 1rem; }

.tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }

.tip-item { display: flex; align-items: center; gap: 0.8rem; padding: 1rem; border-radius: 8px; transition: 0.3s; }

.tip-item.good { background: rgba(34, 197, 94, 0.1); border-left: 4px solid rgb(34, 197, 94); }

.tip-item.bad { background: rgba(239, 68, 68, 0.1); border-left: 4px solid rgb(239, 68, 68); }

.tip-icon { font-size: 1.3rem; flex-shrink: 0; }

.question-list { display: grid; gap: 2rem; margin-top: 1rem; }

.question-item { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; border: rgba(255, 255, 255, 0.1); }

.question-text { color: rgb(251, 191, 36); font-size: 1.1rem; margin-bottom: 1rem; padding: 1rem; background: rgba(251, 191, 36, 0.1); border-radius: 8px; border-left: 4px solid rgb(251, 191, 36); }

.answer-strategy h5 { color: rgb(147, 197, 253); margin-bottom: 0.8rem; }

.strategy-content { padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; }

.good-example { margin-top: 1rem; padding: 1rem; background: rgba(34, 197, 94, 0.1); border-radius: 8px; border-left: 4px solid rgb(34, 197, 94); }

.reson-tactics { display: grid; gap: 2rem; margin-top: 1rem; }

.tactic-category { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; }

.tactic-category h4 { color: rgb(147, 197, 253); margin-bottom: 1rem; }

.tactic-items { display: grid; gap: 1rem; }

.tactic-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; transition: 0.3s; }

.tactic-item:hover { background: rgba(255, 255, 255, 0.08); }

.tactic-item.bad { background: rgba(239, 68, 68, 0.1); border-left: 4px solid rgb(239, 68, 68); }

.tactic-icon { font-size: 1.5rem; flex-shrink: 0; }

.star-method-examples { display: grid; gap: 2rem; margin-top: 1rem; }

.star-example { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; border: rgba(255, 255, 255, 0.1); }

.star-example h4 { color: rgb(251, 191, 36); margin-bottom: 1rem; }

.star-example .question { color: rgb(229, 231, 235); font-size: 1.1rem; margin-bottom: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; }

.star-answer { display: grid; gap: 1rem; }

.star-part { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: rgba(59, 130, 246, 0.1); border-radius: 8px; }

.star-label { color: rgb(251, 191, 36); font-weight: bold; flex-shrink: 0; min-width: 80px; }

.importance-points { display: grid; gap: 1.5rem; margin-top: 1rem; }

.importance-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 12px; border: rgba(255, 255, 255, 0.1); transition: 0.3s; }

.importance-item:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }

.importance-icon { font-size: 2rem; flex-shrink: 0; }

.calculation-example { margin-top: 0.5rem; padding: 0.8rem; background: rgba(251, 191, 36, 0.1); border-radius: 6px; font-size: 0.9rem; border-left: 3px solid rgb(251, 191, 36); }

.value-points { margin-top: 0.5rem; padding: 0.5rem; background: rgba(59, 130, 246, 0.1); border-radius: 6px; font-size: 0.9rem; }

.skill-indicator { margin-top: 0.5rem; padding: 0.5rem; background: rgba(34, 197, 94, 0.1); border-radius: 6px; font-size: 0.9rem; }

.psychological-impact { margin-top: 0.5rem; padding: 0.5rem; background: rgba(168, 85, 247, 0.1); border-radius: 6px; font-size: 0.9rem; }

.golden-rules { display: grid; gap: 1rem; margin-top: 1rem; }

.rule-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border-left: 4px solid rgb(251, 191, 36); transition: 0.3s; }

.rule-item:hover { background: rgba(255, 255, 255, 0.08); }

.rule-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: linear-gradient(135deg, rgb(251, 191, 36), rgb(245, 158, 11)); color: rgb(31, 41, 55); border-radius: 50%; font-weight: bold; flex-shrink: 0; }

.salary-components { display: grid; gap: 2rem; margin-top: 1rem; }

.component-category { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; }

.component-category h4 { color: rgb(147, 197, 253); margin-bottom: 1rem; font-size: 1.1rem; }

.component-items { display: grid; gap: 1rem; }

.component-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; transition: 0.3s; }

.component-item:hover { background: rgba(255, 255, 255, 0.08); }

.component-icon { font-size: 1.5rem; flex-shrink: 0; }

.component-tip { margin-top: 0.5rem; padding: 0.5rem; background: rgba(59, 130, 246, 0.1); border-radius: 6px; font-size: 0.9rem; }

.market-research { margin-top: 1rem; }

.research-dimensions { display: grid; gap: 2rem; }

.dimension-item { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; }

.dimension-item h4 { color: rgb(147, 197, 253); margin-bottom: 1rem; }

.channel-sources { display: grid; gap: 1rem; }

.source-category { background: rgba(255, 255, 255, 0.05); padding: 1rem; border-radius: 8px; }

.source-category h5 { color: rgb(229, 231, 235); margin-bottom: 0.8rem; }

.source-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.source-tag { padding: 0.3rem 0.8rem; background: rgba(59, 130, 246, 0.06); border-radius: 15px; font-size: 0.85rem; color: rgb(147, 197, 253); }

.data-dimensions { margin-top: 1rem; }

.data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }

.data-item { padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; text-align: center; }

.data-label { display: block; color: rgb(251, 191, 36); font-weight: bold; margin-bottom: 0.5rem; }

.data-desc { font-size: 0.9rem; color: rgb(156, 163, 175); }

.analysis-methods { display: grid; gap: 1rem; margin-top: 1rem; }

.method-step { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; }

.method-step .step-number { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; background: linear-gradient(135deg, rgb(59, 130, 246), rgb(29, 78, 216)); color: white; border-radius: 50%; font-weight: bold; font-size: 0.9rem; flex-shrink: 0; }

.value-assessment { display: grid; gap: 2rem; margin-top: 1rem; }

.assessment-category { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; }

.assessment-category h4 { color: rgb(147, 197, 253); margin-bottom: 1rem; }

.value-metrics { display: grid; gap: 1rem; }

.metric-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; }

.metric-icon { font-size: 1.5rem; flex-shrink: 0; }

.skill-levels { display: grid; gap: 0.5rem; margin-top: 0.5rem; }

.skill-level { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 6px; }

.level-name { color: rgb(229, 231, 235); }

.level-score { color: rgb(34, 197, 94); font-weight: bold; }

.project-achievements { display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; }

.achievement-item { padding: 0.5rem 1rem; background: rgba(34, 197, 94, 0.06); border-radius: 15px; font-size: 0.9rem; }

.achievement-type { color: rgb(229, 231, 235); }

.achievement-value { color: rgb(34, 197, 94); font-weight: bold; margin-left: 0.5rem; }

.certifications { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }

.cert-tag { padding: 0.3rem 0.8rem; background: rgba(59, 130, 246, 0.06); border-radius: 15px; font-size: 0.85rem; color: rgb(147, 197, 253); }

.soft-metrics { display: grid; gap: 1rem; }

.soft-metric { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; }

.soft-icon { font-size: 1.5rem; flex-shrink: 0; }

.evidence { margin-top: 0.5rem; padding: 0.5rem; background: rgba(59, 130, 246, 0.1); border-radius: 6px; font-size: 0.9rem; }

.value-formula { margin-top: 1rem; }

.formula-section { margin-bottom: 2rem; }

.formula-section h5 { color: rgb(251, 191, 36); margin-bottom: 1rem; }

.formula { padding: 1rem; background: rgba(59, 130, 246, 0.1); border-radius: 8px; text-align: center; font-size: 1.1rem; color: rgb(147, 197, 253); margin-bottom: 1rem; }

.example-calculation { padding: 1rem; background: rgba(34, 197, 94, 0.1); border-radius: 8px; border-left: 4px solid rgb(34, 197, 94); }

.premium-factors { display: grid; gap: 0.8rem; }

.premium-item { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem; background: rgba(255, 255, 255, 0.05); border-radius: 6px; }

.premium-type { color: rgb(229, 231, 235); }

.premium-value { color: rgb(34, 197, 94); font-weight: bold; }

.strategy-planning { display: grid; gap: 2rem; margin-top: 1rem; }

.strategy-section { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; }

.strategy-section h4 { color: rgb(147, 197, 253); margin-bottom: 1rem; }

.target-ranges { display: grid; gap: 1rem; }

.range-level { padding: 1.2rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border-left: 4px solid rgb(251, 191, 36); }

.level-label { display: block; color: rgb(251, 191, 36); font-weight: bold; margin-bottom: 0.5rem; }

.level-desc { color: rgb(156, 163, 175); margin-bottom: 0.5rem; }

.level-calculation { padding: 0.5rem; background: rgba(59, 130, 246, 0.1); border-radius: 6px; font-size: 0.9rem; }

.negotiation-chips { display: grid; gap: 1.5rem; }

.chip-category { background: rgba(255, 255, 255, 0.05); padding: 1rem; border-radius: 8px; }

.chip-category h5 { color: rgb(229, 231, 235); margin-bottom: 0.8rem; }

.chip-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; }

.chip-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem; background: rgba(255, 255, 255, 0.05); border-radius: 6px; transition: 0.3s; }

.chip-item:hover { background: rgba(255, 255, 255, 0.08); }

.chip-icon { font-size: 1.2rem; }

.script-preparation { display: grid; gap: 1rem; margin-top: 1rem; }

.script-scenario { background: rgba(255, 255, 255, 0.05); padding: 1rem; border-radius: 8px; }

.script-scenario h5 { color: rgb(251, 191, 36); margin-bottom: 0.8rem; }

.script-content { padding: 1rem; background: rgba(59, 130, 246, 0.1); border-radius: 6px; font-style: italic; }

.timing-analysis { margin-top: 1rem; }

.timing-grid { display: grid; gap: 1rem; }

.timing-item { padding: 1.5rem; border-radius: 12px; border-left: 4px solid; }

.timing-item.optimal { background: rgba(34, 197, 94, 0.1); border-left-color: rgb(34, 197, 94); }

.timing-item.good { background: rgba(251, 191, 36, 0.1); border-left-color: rgb(251, 191, 36); }

.timing-item.caution { background: rgba(249, 115, 22, 0.1); border-left-color: rgb(249, 115, 22); }

.timing-item.avoid { background: rgba(239, 68, 68, 0.1); border-left-color: rgb(239, 68, 68); }

.timing-status { display: block; font-weight: bold; margin-bottom: 0.5rem; }

.timing-item h4 { color: rgb(229, 231, 235); margin-bottom: 0.5rem; }

.timing-advantages { margin-top: 0.5rem; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 6px; font-size: 0.9rem; }

.negotiation-scripts { display: grid; gap: 2rem; margin-top: 1rem; }

.script-category { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; }

.script-category h4 { color: rgb(147, 197, 253); margin-bottom: 1rem; }

.script-examples { display: grid; gap: 1rem; }

.script-item { border-radius: 8px; overflow: hidden; }

.script-item.good { border: 1px solid rgb(34, 197, 94); }

.script-item.bad { border: 1px solid rgb(239, 68, 68); }

.script-label { display: block; padding: 0.5rem 1rem; font-weight: bold; color: white; }

.script-item.good .script-label { background: rgb(34, 197, 94); }

.script-item.bad .script-label { background: rgb(239, 68, 68); }

.script-content { padding: 1rem; background: rgba(255, 255, 255, 0.05); }

.script-analysis { margin-top: 0.5rem; padding: 0.5rem; background: rgba(59, 130, 246, 0.1); border-radius: 6px; font-size: 0.9rem; }

.response-strategies { display: grid; gap: 2rem; margin-top: 1rem; }

.strategy-item { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; border: rgba(255, 255, 255, 0.1); }

.strategy-item h4 { color: rgb(251, 191, 36); margin-bottom: 1rem; }

.hr-tactic { padding: 1rem; background: rgba(239, 68, 68, 0.1); border-radius: 8px; border-left: 4px solid rgb(239, 68, 68); margin-bottom: 1rem; }

.your-response h5 { color: rgb(147, 197, 253); margin-bottom: 1rem; }

.response-options { display: grid; gap: 1rem; }

.response-option { padding: 1rem; border-radius: 8px; }

.response-option.primary { background: rgba(34, 197, 94, 0.1); border-left: 4px solid rgb(34, 197, 94); }

.response-option.secondary { background: rgba(59, 130, 246, 0.1); border-left: 4px solid rgb(59, 130, 246); }

.multiple-offer-strategy { margin-top: 1rem; }

.strategy-steps { display: grid; gap: 1.5rem; margin-bottom: 2rem; }

.step-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 12px; border: rgba(255, 255, 255, 0.1); }

.step-item .step-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: linear-gradient(135deg, rgb(59, 130, 246), rgb(29, 78, 216)); color: white; border-radius: 50%; font-weight: bold; flex-shrink: 0; }

.comparison-factors { margin-top: 0.5rem; padding: 0.5rem; background: rgba(59, 130, 246, 0.1); border-radius: 6px; font-size: 0.9rem; }

.priority-method { margin-top: 0.5rem; padding: 0.5rem; background: rgba(34, 197, 94, 0.1); border-radius: 6px; font-size: 0.9rem; }

.disclosure-timing { margin-top: 0.5rem; padding: 0.5rem; background: rgba(251, 191, 36, 0.1); border-radius: 6px; font-size: 0.9rem; }

.negotiation-tactics { margin-top: 0.5rem; padding: 0.5rem; background: rgba(168, 85, 247, 0.1); border-radius: 6px; font-size: 0.9rem; }

.example-scripts { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; }

.example-scripts h4 { color: rgb(147, 197, 253); margin-bottom: 1rem; }

.script-example { background: rgba(255, 255, 255, 0.05); padding: 1rem; border-radius: 8px; }

.script-scenario { color: rgb(251, 191, 36); margin-bottom: 1rem; }

.script-analysis { margin-top: 0.5rem; padding: 0.5rem; background: rgba(59, 130, 246, 0.1); border-radius: 6px; font-size: 0.9rem; }

.career-change-negotiation { display: grid; gap: 2rem; margin-top: 1rem; }

.change-challenges { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; }

.change-challenges h4 { color: rgb(239, 68, 68); margin-bottom: 1rem; }

.challenge-items { display: grid; gap: 1rem; }

.challenge-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(239, 68, 68, 0.1); border-radius: 8px; }

.challenge-icon { font-size: 1.3rem; }

.change-strategies { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; }

.change-strategies h4 { color: rgb(147, 197, 253); margin-bottom: 1rem; }

.strategy-items { display: grid; gap: 1rem; }

.strategy-items .strategy-item { background: rgba(255, 255, 255, 0.05); padding: 1rem; border-radius: 8px; border-left: 4px solid rgb(59, 130, 246); }

.strategy-items .strategy-item h5 { color: rgb(251, 191, 36); margin-bottom: 0.5rem; }

.strategy-tip { margin-top: 0.5rem; padding: 0.5rem; background: rgba(59, 130, 246, 0.1); border-radius: 6px; font-size: 0.9rem; }

.change-examples { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; }

.change-examples h4 { color: rgb(147, 197, 253); margin-bottom: 1rem; }

.example-dialogue { display: grid; gap: 1rem; }

.dialogue-item { padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; }

.speaker { color: rgb(251, 191, 36); font-weight: bold; margin-right: 0.5rem; }

.speech { color: rgb(229, 231, 235); }

.salary-optimization { display: grid; gap: 2rem; margin-top: 1rem; }

.optimization-category { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; }

.optimization-category h4 { color: rgb(147, 197, 253); margin-bottom: 1rem; }

.optimization-tactics { display: grid; gap: 1rem; }

.optimization-tactics .tactic-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; }

.optimization-tactics .tactic-icon { font-size: 1.3rem; flex-shrink: 0; }

.combination-examples { margin-top: 1rem; }

.combination-examples h5 { color: rgb(251, 191, 36); margin-bottom: 1rem; }

.example-item { padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; margin-bottom: 0.8rem; }

.example-title { color: rgb(147, 197, 253); font-weight: bold; margin-bottom: 0.5rem; }

.example-desc { color: rgb(156, 163, 175); font-size: 0.9rem; }

.confirmation-checklist { display: grid; gap: 2rem; margin-top: 1rem; }

.checklist-category { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; }

.checklist-category h4 { color: rgb(147, 197, 253); margin-bottom: 1rem; }

.checklist-items { display: grid; gap: 0.8rem; }

.checklist-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem; background: rgba(255, 255, 255, 0.05); border-radius: 6px; transition: 0.3s; }

.checklist-item:hover { background: rgba(255, 255, 255, 0.08); }

.check-icon { color: rgb(34, 197, 94); font-size: 1.2rem; flex-shrink: 0; }

.failure-handling { display: grid; gap: 2rem; margin-top: 1rem; }

.handling-category { background: rgba(255, 255, 255, 0.03); padding: 1.5rem; border-radius: 12px; }

.handling-category h4 { color: rgb(147, 197, 253); margin-bottom: 1rem; }

.reason-analysis { display: grid; gap: 1rem; }

.reason-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: rgba(239, 68, 68, 0.1); border-radius: 8px; }

.reason-icon { font-size: 1.3rem; flex-shrink: 0; }

.response-strategies .strategy-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border-left: 4px solid rgb(251, 191, 36); }

.lessons-learned { display: grid; gap: 0.8rem; }

.lesson-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem; background: rgba(34, 197, 94, 0.1); border-radius: 6px; }

.lesson-icon { font-size: 1.2rem; flex-shrink: 0; }

.philosophy-banner { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(168, 85, 247, 0.1)); border-radius: 16px; padding: 2rem; border: rgba(255, 255, 255, 0.1); margin-bottom: 2rem; }

.philosophy-banner h2 { color: rgb(147, 197, 253); text-align: center; margin-bottom: 2rem; font-size: 1.8rem; font-weight: 600; }

.philosophy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 2rem; }

.philosophy-item { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 1.5rem; border: rgba(255, 255, 255, 0.1); transition: 0.3s; text-align: center; }

.philosophy-item:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-4px); }

.philosophy-icon { font-size: 3rem; margin-bottom: 1rem; display: block; }

.philosophy-item h3 { color: rgb(251, 191, 36); margin-bottom: 1rem; font-size: 1.3rem; font-weight: 600; }

.philosophy-item p { color: rgb(229, 231, 235); line-height: 1.6; font-size: 0.95rem; }

.philosophy-highlight { background: rgba(251, 191, 36, 0.1); border-radius: 12px; padding: 1.5rem; border-left: 4px solid rgb(251, 191, 36); border-right: 4px solid rgb(251, 191, 36); text-align: center; }

.philosophy-highlight p { color: rgb(243, 244, 246); font-size: 1.1rem; line-height: 1.7; margin: 0px; }

.philosophy-highlight strong { color: rgb(251, 191, 36); font-size: 1.2rem; }

@media (max-width: 768px) {
  .hr-dimensions { gap: 1rem; }
  .dimension-item { flex-direction: column; text-align: center; padding: 1rem; }
  .feature-items { grid-template-columns: 1fr; }
  .tips-grid { grid-template-columns: 1fr; }
  .structure-step { flex-direction: column; text-align: center; padding: 1rem; }
  .star-part { flex-direction: column; text-align: center; }
  .star-label { min-width: auto; margin-bottom: 0.5rem; }
  .importance-points { gap: 1rem; }
  .importance-item { flex-direction: column; text-align: center; padding: 1rem; }
  .component-items { gap: 0.8rem; }
  .component-item { flex-direction: column; text-align: center; padding: 1rem; }
  .source-items { justify-content: center; }
  .data-grid { grid-template-columns: 1fr; }
  .method-step { flex-direction: column; text-align: center; }
  .value-metrics { gap: 0.8rem; }
  .metric-item { flex-direction: column; text-align: center; padding: 1rem; }
  .project-achievements { justify-content: center; }
  .certifications { justify-content: center; }
  .soft-metrics { gap: 0.8rem; }
  .soft-metric { flex-direction: column; text-align: center; padding: 1rem; }
  .premium-factors { gap: 0.6rem; }
  .premium-item { flex-direction: column; text-align: center; gap: 0.3rem; }
  .target-ranges { gap: 0.8rem; }
  .range-level { padding: 1rem; }
  .chip-items { grid-template-columns: 1fr; }
  .chip-item { justify-content: center; }
  .timing-grid { gap: 0.8rem; }
  .timing-item { padding: 1rem; }
  .script-examples { gap: 0.8rem; }
  .response-options { gap: 0.8rem; }
  .strategy-steps { gap: 1rem; }
  .step-item { flex-direction: column; text-align: center; padding: 1rem; }
  .challenge-items { gap: 0.8rem; }
  .challenge-item { flex-direction: column; text-align: center; }
  .strategy-items { gap: 0.8rem; }
  .example-dialogue { gap: 0.8rem; }
  .dialogue-item { padding: 0.8rem; }
  .optimization-tactics { gap: 0.8rem; }
  .optimization-tactics .tactic-item { flex-direction: column; text-align: center; padding: 0.8rem; }
  .checklist-items { gap: 0.6rem; }
  .checklist-item { padding: 0.6rem; }
  .reason-analysis { gap: 0.8rem; }
  .reason-item { flex-direction: column; text-align: center; padding: 0.8rem; }
  .response-strategies .strategy-item { flex-direction: column; text-align: center; padding: 0.8rem; }
  .lessons-learned { gap: 0.6rem; }
  .lesson-item { padding: 0.6rem; }
  .philosophy-banner { padding: 1.5rem; }
  .philosophy-banner h2 { font-size: 1.5rem; margin-bottom: 1.5rem; }
  .philosophy-grid { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
  .philosophy-item { padding: 1.2rem; }
  .philosophy-icon { font-size: 2.5rem; margin-bottom: 0.8rem; }
  .philosophy-item h3 { font-size: 1.2rem; margin-bottom: 0.8rem; }
  .philosophy-item p { font-size: 0.9rem; }
  .philosophy-highlight { padding: 1.2rem; }
  .philosophy-highlight p { font-size: 1rem; }
  .philosophy-highlight strong { font-size: 1.1rem; }
}