:root {--primary-color: #3498db;--secondary-color: #005050;--light-text: #0008;--border-color: #ddd;--shadow: 0 4px 6px #0000001a;}* {margin: 0;padding: 0;box-sizing: border-box;}html {font-size: 14px;}body {color: #000;background-color: #f5f7fa;}article#main {margin-top: 55px;}.tips p {margin: 10px 0;}.icon {position: relative;top: 5px;width: 20px;}.container {max-width: 2400px;margin: 0 auto;}header {margin-bottom: 30px;}header h1 {font-size: 1.5rem;color: var(--secondary-color);margin-bottom: 10px;}.app-container {display: flex;gap: 30px;}.form-section {flex: 1;background: white;border-radius: 8px;box-shadow: var(--shadow);padding: 20px;height: fit-content;}.in-sec {flex: 1;}.in-sec input {width: 90%;padding: 5px;border-radius: 3px;border: 1px solid var(--border-color);}.in-sec input[type="color"] {padding: 0;}.in-sec label {display: block;margin-bottom: 10px;font-weight: 600;}#ctps {width: 20px;height: 20px;margin-left: 10px;}.preview-section {flex: 1;display: flex;flex-direction: column;gap: 20px;}.resume-content {width: 100%;}.res-left,.res-right {width: 48%;}.form-tabs {display: flex;justify-content: space-between;flex-wrap: wrap;margin-bottom: 20px;border-bottom: 1px solid var(--border-color);}.tab-btn {padding: 10px 15px;background: none;border: none;cursor: pointer;font-weight: 700;position: relative;transition: all 0.3s ease;}.tab-btn:after {content: '';position: absolute;bottom: -1px;left: 0;width: 0;height: 2px;background-color: var(--primary-color);transition: width 0.3s ease;}.tab-btn.active {color: #09b1f3;}.tab-btn.active:after {width: 100%;}.tab-content {display: none;}.tab-content.active {display: block;}.tab-content h2 {margin-bottom: 30px;}.form-group {margin-bottom: 15px;}.form-group label {display: block;margin-bottom: 9px;font-weight: bold;color: var(--secondary-color);}.form-group input,.form-group textarea {width: 100%;padding: 10px;border: 1px solid var(--border-color);border-radius: 4px;font-family: inherit;font-size: 14px;transition: border 0.3s ease;letter-spacing: 1px;outline: none;}.form-group input:focus,.form-group textarea:focus,.in-sec input:focus {border-color: var(--primary-color);}.form-group textarea {resize: vertical;min-height: 80px;}.form-row {display: flex;gap: 15px;}.form-row .form-group {flex: 1;}.remove-btn {position: absolute;top: 5px;right: 5px;background: #e74c3c;color: white;border: none;width: 25px;height: 25px;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 12px;}.remove-btn.hidden {display: none;}.add-btn {background: var(--primary-color);color: white;border: none;padding: 8px 15px;border-radius: 4px;cursor: pointer;display: flex;align-items: center;gap: 5px;font-size: 14px;}.add-btn:hover {background: #2980b9;}input#addFoto {width: 25px;padding: 1px;border-radius: 2px;margin-left: 20px;}.template-selector {background: white;border-radius: 8px;box-shadow: var(--shadow);padding: 20px;}.template-selector h3 {margin-bottom: 15px;color: var(--secondary-color);}.template-options {display: flex;justify-content: space-around;gap: 15px;flex-wrap: wrap;}.template-option {display: flex;flex-direction: column;align-items: center;cursor: pointer;transition: transform 0.3s ease;}.template-option:hover {transform: translateY(-5px);}.template-thumbnail {width: 90px;height: 110px;border: 2px solid var(--border-color);border-radius: 4px;margin-bottom: 5px;transition: border 0.3s ease;}.template-option:hover .template-thumbnail {border-color: var(--primary-color);}.template-option.selected .template-thumbnail {border: 3px dotted #000;}.template-thumbnail.t1 {background: linear-gradient(180deg, #fff 0%, #2a6cfb 100%);}.template-thumbnail.t2 {background: linear-gradient(180deg, #fff 0%, #2ab70b 100%);}.template-thumbnail.t3 {background: linear-gradient(180deg, #fff 0%, #28B8B6 100%);}.template-thumbnail.t4 {background: linear-gradient(180deg, #fff 0%, #037a3b 100%);}.template-thumbnail.t5 {background: linear-gradient(180deg, #fff 0%, #3f037c 100%);}.cst {font-size: 0.9rem;margin-top: 20px;margin-bottom: 20px;}.skt,.ii2 {margin-bottom: 15px;margin-top: 10px;letter-spacing: 1px;font-weight: bold;border: 1px solid #888 !important;}.form-group input.i2 {padding: 7px;font-weight: bold;font-size: 18px;border-radius: 5px;border: 1px solid gray;margin-bottom: 10px;margin-top: 10px;}.skt:focus,.ii2:focus,.form-group input.i2:focus {border-color: #0011ff !important;}.sls {margin: 10px 5px;font-size: 12px;font-style: italic;}select {padding: 2px 3px;margin-left: 8px;}.resume-preview {display: flex;flex-direction: column;flex: 1;background: #ffffff;border-radius: 8px;box-shadow: var(--shadow);padding: 20px;width: 100%;overflow: scroll;}.resume-container {flex: 1;background: #ffffff;box-shadow: 0 0 10px #0000001a;overflow: auto;max-height: 800px;padding: 20px;min-width: 600px;}.action-buttons {display: flex;gap: 10px;margin-top: 20px;}.action-btn {flex: 1;padding: 12px;border: none;border-radius: 4px;cursor: pointer;font-weight: 500;display: flex;align-items: center;justify-content: center;gap: 8px;transition: all 0.3s ease;}#print-resume {background: var(--secondary-color);color: white;}#print-resume:hover {background: #1a252f;}#reset-form {background: #f5e97e;color: #000;text-transform: uppercase;}#reset-form:hover {background: #ffd900;}/* Resume Template Styles */.resume {color: #333;}.resume-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 8px;padding-top: 12px;border-bottom: 2px solid #2a6cfb;}.resume-name {font-size: 1.58rem;font-weight: 700;margin-bottom: 5px;}.resume-title {font-size: 1.25rem;font-weight: 700;}.resume-contact p {margin-bottom: 5px;}.resume-info {margin-top: 15px;text-align: center;}.resume-info.iAf,.isA .resume-info {margin-top: 1px;margin-bottom: 20px;}.resume-photo {width: 70%;height: 70%;border-radius: 50%;object-fit: cover;border: 5px solid #2a6cfb;box-shadow: -9px 0px 2px 6px #2a6cfb91;text-align: center;line-height: 130px;}.resume-section {margin-bottom: 20px;}.section-title {font-size: 1.09rem;font-weight: 700;margin-bottom: 15px;margin-top: 10px;padding-bottom: 5px;border-bottom: 0.8px solid #2a6cfb;color: #2a6cfb;}.resume-summary {margin-top: 20px;margin-bottom: 20px;}.experience-item,.education-item {padding: 10px 3px 0 5px;margin-bottom: 15px;position: relative;}.experience-header,.education-header {margin-bottom: 5px;}.experience-title,.education-degree {font-weight: 700;}.experience-company,.education-institution {font-size: 0.85rem;}.experience-dates,.education-dates {font-size: 0.8rem;color: var(--light-text);}.resume-section p {margin-top: 8px;margin-left: 5px;}.ref-sec div {margin-left: 5px;font-size: 0.71rem;}div.cusRef {margin: 8px 0 5px 5px;}.resume-contact div {font-size: 0.71rem;margin-top: 5px;}.resume-section p,.ref-sec div,.skills-list div,.resume-contact div {word-break: break-word;}.skills-list div {margin-bottom: 5px;margin-left: 5px;}.skills-list div::before {content: "•";margin-right: 5px;margin-left: 5px;}.skills-list.x2 div::before {content: "✓";}.skills-list.x3 div::before {content: "-";}.skills-list.x4 div::before {content: "○";}.skills-list.x5 div::before {content: "⁘";}.skills-list.x6 div::before {content: "■";}.skills-list.x7 div::before {content: "●";}.skills-list.x8 div::before {content: "◆";}.skills-list.x9 div::before {content: "◉";}/* Template-specific styles */.resume-contact {padding: 5px;}.template-t1 .resume-contact {background: linear-gradient(#358cf0, #2b9fedcf, #358cf0);color: #fff;}.template-t1 .resume-name {color: #2a6cfb;}/* template 2 */.template-t2 .resume-contact {background: linear-gradient(#2ab70b, #2ab70b91, #2ab70b);}.template-t2 .resume-header {border-bottom-color: #2ab70b;}.template-t2 .section-title {border-bottom-color: #2ab70b;color: #2ab70b;}.template-t2 .resume-name {color: #2ab70b;}.template-t2 .resume-photo {border-color: #2ab70b;box-shadow: -9px 0px 2px 6px #35f52791;}/* template 3 #ff8c00 */.template-t3 .resume-contact {background: linear-gradient(#28B8B6, #28B8B691, #28B8B6);}.template-t3 .resume-header {border-bottom-color: #28B8B6;}.template-t3 .section-title {border-bottom-color: #28B8B6;color: #28B8B6;}.template-t3 .resume-name {color: #28B8B6;}.template-t3 .resume-photo {border-color: #28B8B6;box-shadow: -9px 0px 2px 6px #28B8B691;}/* template 4 */.template-t4 .resume-contact {background: linear-gradient(#037a3b, #037a3b91, #037a3b);color: #fff;}.template-t4 .resume-header {border-bottom-color: #037a3b;}.template-t4 .section-title {border-bottom-color: #037a3b;color: #037a3b;}.template-t4 .resume-name {color: #037a3b;}.template-t4 .resume-photo {border-color: #037a3b;box-shadow: -9px 0px 2px 6px #037a3b91;}/* template 5 */.template-t5 .resume-contact {background: linear-gradient(#3f037c, #3f037c91, #3f037c);color: #fff;}.template-t5 .resume-contact a,.template-t4 .resume-contact a {color: #fff;}.template-t5 .resume-header {border-bottom-color: #3f037c;}.template-t5 .section-title {border-bottom-color: #3f037c;color: #3f037c;}.template-t5 .resume-name {color: #3f037c;}.template-t5 .resume-photo {border-color: #3f037c;box-shadow: -9px 0px 2px 6px #3f037c91;}.temp1 {display: flex;justify-content: space-around;width: 100%;}.temp1.iUc {display: block;}.temp1.iUc .i-u-c {display: flex;width: 100%;}.temp1.a,.temp1.iUc.a .i-u-c {flex-direction: row-reverse;}.temp3,.temp5 {display: flex;flex-direction: column;width: 100%;}.temp3 .xp {margin-top: 20px;}.temp3 .resume-info,.no-img .resume-info {margin-top: 1px;}.temp1.hidden,.temp3.hidden {display: none;}.i1 {width: 50%;}.i1 .photo,.i1.photo {display: flex;justify-content: center;}.no-img {width: 100%;}.no-img .resume-contact {margin-top: 10px;text-align: center;}.experience-description,.education-description,.skills-list,.resume-summary,.resume-section p,div.cusRef {font-size: 0.9rem;}/* Responsive styles */@media only screen and (max-width: 1200px) {.app-container {flex-direction: column;}}@media only screen and (max-width: 768px) {.form-row {flex-direction: column;gap: 0;}.template-options {justify-content: center;}.action-buttons {flex-direction: column;}}@media only screen and (max-width: 550px) {.form-tabs {justify-content: unset;}.in-wrap {flex-direction: column;}.in-sec label {margin-top: 5px;}#ctfoc {margin-left: 20px;margin-top: 10px;}.resume-container {max-height: 550px;}}@media print {body {position: unset;top: 0 !important;background: #fff !important;background-color: #fff !important;border: none !important;padding: 0 !important;margin: 0 !important;}.page-partials,.header,.form-section,.template-selector,.action-buttons,.gad-wrap-2,.gad-wrap-3,.gad-wrap-4,.related-content,.page-main-footer,.tips,#gte, .translator-warp, .art-share {display: none;}#main,.main-content, article#main {margin: 0;padding: 0;}@page {margin: 0.5cm;size: 210mm 297mm portrait;}.page-break {page-break-before: always;}.container {max-width: unset;margin: 0;padding: 12px 10px 10px 10px;}.preview-section {display: block;}.resume-preview {border-radius: unset;padding: 0;box-shadow: unset;overflow: visible;-webkit-print-color-adjust: exact;print-color-adjust: exact;}.resume-container {box-shadow: unset;overflow: visible;max-height: unset;max-width: unset;padding: 5px;}}