.auras-tool-result-image {
    max-width: 120px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1rem;
    object-fit: cover;
}

/* 
 * Styles for the main result container layout.
 */
.life-path-result {
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
    gap: 1.5rem;
}

.life-path-visual {
    flex-shrink: 0;
    text-align: center;
}

.life-path-details {
    flex-grow: 1;
}

.result-highlight {
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
}/**
 * Auras Tool Blocks - Core CSS
 * Version: 1.3.1 (Cleaned & Reorganized)
 * Based on the user-provided stable version. This version focuses on code clarity.
 */

/* ===================================================================
 * 1. CORE LAYOUT & STRUCTURE
 * 核心布局与结构 (容器, 手风琴, 表单网格, 响应式)
 * ===================================================================
*/

/* ---- 1.1 Universal Container ---- */
.auras-tool-container {
    background: #f7f9fc;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 1rem; /* Mobile-first padding */
    max-width: 1200px;
    margin: 2rem auto;
    font-family: Alexandria, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    box-sizing: border-box;
}

/* ---- 1.2 Accordion Layout ---- */
.auras-tool-accordion-item {
    background: #ffffff;
    border: 1px solid #e1e8ed; /* This creates the "card within a card" effect */
    border-radius: 4px;
    margin-bottom: 1rem;
    transition: box-shadow 0.2s ease-in-out;
}
.auras-tool-accordion-header {
    margin: 0;
}
.auras-tool-accordion-trigger {
    background: transparent;
    border: none;
    padding: 1rem 1.5rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    color: #1c2938;
    text-align: left;
}
.auras-tool-accordion-content {
    padding: 1.5rem;
    border-top: 1px solid #e1e8ed;
}

/* ---- 1.3 Responsive Form Grid System (Mobile-First) ---- */
/* Default for mobile: fields stack vertically */
.auras-tool-form-grid > .auras-tool-field:not(:last-child) {
    margin-bottom: 1.25rem;
}


/* ---- 1.4 Responsive Breakpoints (Tablet & Desktop) ---- */
@media (min-width: 768px) {

    /* [Responsive] Widen container padding on larger screens */
    .auras-tool-container {
        padding: 2rem;
    }

    /* [Responsive] Activate grid layout for forms */
    .auras-tool-form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }

    /* [Responsive] Remove bottom margin when grid gap is active */
    .auras-tool-form-grid > .auras-tool-field:not(:last-child) {
        margin-bottom: 0;
    }
}

/* ===================================================================
 * 2. GENERAL ELEMENTS & TYPOGRAPHY
 * 通用元素与排版 (标题, 文本, 表单字段)
 * ===================================================================
*/
/* ---- 2.1 Base & Typography ---- */
.auras-tool-container *, .auras-tool-container *:before, .auras-tool-container *:after {
    box-sizing: inherit;
}
.auras-tool-container h3, .auras-tool-container h4,.auras-tool-container .tool-heading {
    color: #1c2938;
    margin: 0;
    font-weight: 500;
}
.auras-tool-container h3 {
    margin-bottom: 0.5rem;
}
.auras-tool-intro {
    color: #5a6e82;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* ---- 2.2 Form Fields ---- */
.auras-tool-field {
    margin-bottom: 1.25rem;
}
.auras-tool-field:last-child {
    margin-bottom: 0;
}
.auras-tool-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #3d4a59;
}
.auras-tool-field input,
.auras-tool-field textarea,
.auras-tool-field select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    background-color: #fff;
}
.auras-tool-field .auras-tool-help-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}


/* ===================================================================
 * 3. SPECIFIC COMPONENTS & MODULES
 * 特定组件与模块 (通知, 按钮, AI结果, 说明等)
 * ===================================================================
*/

/* ---- 3.1 Notice Box ---- */
.auras-tool-notice {
    background-color: #e7f3fe;
    border-left: 4px solid #007bff;
    padding: 1rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    font-size: 0.95rem;
    color: #0c5460;
}

/* ---- 3.15 Embedded Tool Notice (NEW) ---- */
/* ---- 3.8 Embedded Tool Link (NEW & IMPROVED STYLE) ---- */
.auras-tool-embedded-link-wrapper {
    /* 移除背景和边框，让它不再像一个盒子 */
    background: none;
    border: none;
    padding: 0;
    /* 调整与下方元素的间距 */
    margin-bottom: 1.5rem;
    text-align: center;
}
.auras-tool-embedded-link-wrapper a {
    color: #007bff; /* 使用标准链接颜色 */
    text-decoration: none; /* 默认无下划线 */
    font-weight: 500;
    font-size: 0.95rem;
    display: inline-block;
    padding: 0.25rem 0.5rem; /* 增加一点可点击区域 */
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}
.auras-tool-embedded-link-wrapper a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
    background-color: #f0f0f0; /* 添加一个轻微的背景高亮 */
}
/* (可选) 在链接后添加一个箭头，增强可点击的视觉提示 */
.auras-tool-embedded-link-wrapper a::after {
    content: ' →';
    display: inline-block;
    margin-left: 4px;
    transition: transform 0.2s ease;
}
.auras-tool-embedded-link-wrapper a:hover::after {
    transform: translateX(3px); /* 悬停时箭头轻微右移 */
}

/* ---- 3.9 Eail-modal-overlay---- */
/* ---- 3.2 Buttons ---- */
.auras-tool-button-calculate, .auras-ai-button {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    text-align: center;
}
.auras-tool-button-calculate:active, .auras-ai-button:active {
    transform: scale(0.98);
}
.auras-tool-button-calculate {
    background-color: #007bff;
    color: white;
    margin-top: 1rem;
}
.auras-tool-button-calculate:hover {
    background-color: #0056b3;
}
.auras-ai-button {
    background-color: #28a745;
    color: white;
}
.auras-ai-button:hover {
    background-color: #218838;
}

/* ---- 3.3 Notification & Result Area ---- */
.auras-tool-notification {
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 4px;
    border: 1px solid transparent;
}
.auras-tool-notification.error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}
.auras-tool-notification.success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}
.auras-tool-result {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: #ffffff;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
}

/* ---- 3.4 AI Section ---- */
.auras-ai-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px dashed #ced4da;
}
.auras-ai-result-wrapper {
    background: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    padding: 1.5rem;
    margin-top: 1rem;
}
.auras-ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 0;
    color: #5a6e82;
}
.auras-ai-content p {
    margin-top: 0;
    line-height: 1.6;
}
.auras-ai-content p:last-child {
    margin-bottom: 0;
}
.auras-tool-result-image {
    max-width: 120px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1rem;
    object-fit: cover;
}
/* ---- 3.5 Tool Usage Instructions ---- */
.auras-tool-instructions {
    position: relative;
    margin-bottom: 1.5rem;
    background-color: #ffffff;
    padding: 1.25rem;
    border-radius: 6px;
    border: 1px solid #e1e8ed;
}
.auras-tool-instructions-content {
    color: #5a6e82;
    font-size: 1rem;
    line-height: 1.7;
    max-height: 4.8rem;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease-in-out;
}
.auras-tool-instructions.is-expanded .auras-tool-instructions-content {
    max-height: 1000px;
}
.auras-tool-instructions-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2rem;
    background: linear-gradient(to bottom, transparent, #ffffff);
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
}
.auras-tool-instructions.is-expanded .auras-tool-instructions-content::after {
    opacity: 0;
}
.auras-tool-instructions-toggle {
    background: none;
    border: none;
    color: #007bff;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 0 0 0;
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
.auras-tool-instructions-toggle:hover {
    text-decoration: underline;
}
.auras-tool-instructions-content h4,
.auras-tool-instructions-content h5 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: #3d4a59;
}
.auras-tool-instructions-content ul,
.auras-tool-instructions-content ol {
    padding-left: 20px;
    margin-bottom: 1rem;
}
.auras-tool-instructions-content p {
    margin-bottom: 0.8rem;
}
.auras-tool-instructions-content p:last-child {
    margin-bottom: 0;
}

/* ---- 3.6 Icons, Spinners & Animations ---- */
.auras-tool-accordion-icon {
    position: relative;
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.auras-tool-accordion-icon::before,
.auras-tool-accordion-icon::after {
    content: '';
    position: absolute;
    background-color: #5a6e82;
    transition: transform 0.3s ease;
}
.auras-tool-accordion-icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.auras-tool-accordion-icon::after { top: 0; left: 7px; width: 2px; height: 16px; }
.is-open .auras-tool-accordion-icon::after {
    transform: rotate(90deg);
}
.auras-spinner {
    display: block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- 3.7 PDF & Email Components ---- */
.auras-ai-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 15px;
}
.auras-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s ease;
    text-decoration: none;
}
.auras-action-button:hover {
    background-color: #f0f0f0;
    border-color: #999;
}
.auras-action-button.is-loading {
    cursor: not-allowed;
    background-color: #e0e0e0;
}
.auras-action-button .auras-spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0,0,0,0.2);
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.auras-email-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.auras-email-modal {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
}
.auras-email-modal h4 {
    margin-top: 0;
    margin-bottom: 15px;
}
.auras-email-modal input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.auras-email-modal .auras-modal-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.auras-email-modal .auras-modal-actions button {
    flex-grow: 1;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.auras-email-modal .auras-modal-button-cancel {
    background-color: #f0f0f0;
}
.auras-email-modal .auras-modal-button-send {
    background-color: #0073aa;
    color: #fff;
}
.auras-modal-feedback {
    margin-top: 15px;
    font-weight: bold;
}
.auras-modal-feedback.success { color: #4caf50; }
.auras-modal-feedback.error { color: #dc3232; }
.auras-modal-intro.success {
    font-size: 1.1rem;
    font-weight: bold;
    color: #28a745;
    transition: color 0.3s ease;
}