:root{--surface: #ffffff;--surface-muted: #f4f6fb;--border: #e3e8f2;--text-main: #1c2333;--text-muted: #5f6b85;--primary: #4f46ef;--primary-dark: #312e81;--accent: #36cfc9;--shadow-soft: 0 20px 45px rgba(15, 23, 42, 0.08);--gradient: linear-gradient(135deg, #4f46ef 0%, #7c3aed 100%);--shadow-soft: 0 20px 45px rgba(15, 23, 42, 0.08);}
#list-intersection-page{padding-bottom: 3rem;color: var(--text-main);}
#list-intersection-page .panel{background: var(--surface);border: 1px solid var(--border);border-radius: 20px;box-shadow: var(--shadow-soft);padding: 32px;height: 100%;transition: background 0.3s ease,border 0.3s ease;}
.tool-hero{display: flex;flex-wrap: wrap;gap: 32px;align-items: flex-start;}
.hero-text{flex: 1;min-width: 260px;}
.hero-text h1{font-size: 40px;font-weight: 700;line-height: 1.2;}
.hero-subtitle{font-size: 18px;color: var(--text-muted);max-width: 640px;margin-bottom: 24px;}
.hero-pill-row{display: flex;flex-wrap: wrap;gap: 12px;}
.hero-pill{padding: 8px 16px;border: 1px solid var(--primary);border-radius: 99px;color: var(--primary);font-weight: 600;font-size: 13px;}
.share-buttons{display: grid;grid-template-columns: repeat(auto-fit,minmax(140px,1fr));gap: 10px;}
.share-btn{border: none;border-radius: 14px;padding: 12px 16px;font-weight: 600;display: inline-flex;align-items: center;justify-content: center;gap: 8px;color: #fff;cursor: pointer;transition: transform 0.2s ease,box-shadow 0.2s ease;box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15);}
.share-btn:hover{transform: translateY(-2px);box-shadow: 0 14px 24px rgba(15, 23, 42, 0.18);}
.share-btn i{font-size: 14px;}
.copy-btn{display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 0.85rem 1.25rem;border-radius: 14px;border: 1px solid var(--border);background: var(--surface-muted);color: var(--text-main);font-weight: 600;cursor: pointer;transition: background 0.2s ease,transform 0.2s ease,border-color 0.2s ease;font-size: 0.95rem;}
.copy-btn:hover{background: rgba(79, 70, 239, 0.08);border-color: var(--primary);transform: translateY(-1px);}
.copy-btn[data-state="copied"]{background: rgba(34, 197, 94, 0.12);border-color: rgba(34, 197, 94, 0.4);color: #059669;}
.result-actions{margin-top: 2rem;padding-top: 1.5rem;border-top: 1px solid var(--border);}
.share-x{background: #111827;}
.share-facebook{background: #1877f2;}
.share-linkedin{background: #0a66c2;}
.share-reddit{background: #ff4500;}
.share-telegram{background: #229ed9;}
.share-whatsapp{background: #25d366;color: #0f172a;}
.tool-wrapper{display: grid;grid-template-columns: repeat(auto-fit,minmax(320px,1fr));gap: 24px;margin-bottom: 40px;}
.textarea-wrapper{position: relative;margin-top: 20px;}
.textarea-wrapper label{font-weight: 600;margin-bottom: 10px;display: block;color: var(--text-muted);}
.text-input-modern{width: 100%;min-height: 280px;border-radius: 18px;border: 1px solid var(--border);padding: 24px;font-size: 16px;line-height: 1.7;background: var(--surface-muted);color: var(--text-main);transition: border 0.2s ease,background 0.2s ease;resize: vertical;}
.text-input-modern:focus{outline: none;border-color: var(--primary);background: var(--surface);box-shadow: 0 0 0 3px rgba(79, 70, 239, 0.15);}
.action-buttons{display: grid;grid-template-columns: repeat(2,1fr);gap: 12px;width: 100%;margin-top: 20px;}
.btn-action-modern{border: none;border-radius: 14px;padding: 14px 18px;font-weight: 600;display: flex;align-items: center;justify-content: center;gap: 10px;box-shadow: inset 0 0 0 1px var(--border);background: var(--surface-muted);color: var(--text-main);transition: transform 0.2s ease,box-shadow 0.2s ease;cursor: pointer;font-size: 15px;}
.btn-action-modern.primary{background: var(--gradient);color: #fff;box-shadow: var(--shadow-soft);}
.btn-action-modern:hover{transform: translateY(-2px);}
.options-panel{margin-top: 24px;padding-top: 24px;border-top: 1px solid var(--border);}
.options-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: 16px;}
.option-item{display: flex;align-items: center;gap: 10px;padding: 12px;border-radius: 12px;background: var(--surface-muted);transition: background 0.2s ease;}
.option-item:hover{background: rgba(79, 70, 239, 0.05);}
.option-item input[type="checkbox"]{width: 18px;height: 18px;cursor: pointer;accent-color: var(--primary);}
.option-item label{cursor: pointer;font-weight: 500;color: var(--text-main);margin: 0;flex: 1;}
.stats-panel{display: flex;flex-direction: column;gap: 24px;}
.stats-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(160px,1fr));gap: 16px;grid-auto-rows: 1fr;}
.stat-card{padding: 18px;border: 1px solid var(--border);border-radius: 16px;background: var(--surface-muted);display: flex;flex-direction: column;gap: 6px;position: relative;}
.stat-label{font-size: 13px;font-weight: 600;color: var(--text-muted);text-transform: uppercase;letter-spacing: 0.08em;}
.stat-value{font-size: 30px;font-weight: 700;color: var(--text-main);}
.sticky-panel{position: sticky;top: 90px;}
.tooltip{position: relative;cursor: help;display: inline-flex;align-items: center;margin-left: 6px;}
.tooltip-icon{width: 16px;height: 16px;border-radius: 50%;background: var(--primary);color: #fff;display: inline-flex;align-items: center;justify-content: center;font-size: 11px;font-weight: 700;}
.tooltip .tooltip-content{opacity: 0;visibility: hidden;position: absolute;bottom: calc(100% + 10px);left: 50%;transform: translateX(-50%);background: var(--surface);border: 1px solid var(--border);padding: 10px 14px;border-radius: 12px;font-size: 13px;color: var(--text-muted);transition: opacity 0.2s ease;box-shadow: var(--shadow-soft);z-index: 10;min-width: 200px;white-space: normal;max-width: 280px;}
.tooltip:hover .tooltip-content,.tooltip:focus .tooltip-content{opacity: 1;visibility: visible;}
.education-block{margin-top: 50px;}
.education-block h2{font-size: 30px;font-weight: 700;margin-bottom: 16px;}
.education-block p{font-size: 16px;color: var(--text-muted);line-height: 1.7;margin-bottom: 16px;}
.education-block ul{margin: 0 0 16px 18px;color: var(--text-muted);line-height: 1.7;}
.education-block li{margin-bottom: 8px;}
.li-callout{border-left: 4px solid var(--primary);background: rgba(79, 70, 239, 0.06);padding: 14px 16px;border-radius: 14px;margin: 18px 0;color: var(--text-main);}
.infographic-row{display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: 16px;margin-top: 24px;}
.infographic-card{border: 1px solid var(--border);border-radius: 16px;padding: 18px;background: var(--surface-muted);}
.infographic-icon{width: 42px;height: 42px;border-radius: 12px;background: var(--gradient);color: #fff;display: inline-flex;align-items: center;justify-content: center;font-weight: 700;margin-bottom: 10px;}
.infographic-card h5{margin-bottom: 6px;font-size: 16px;font-weight: 600;}
.infographic-card p{font-size: 14px;color: var(--text-muted);margin: 0;line-height: 1.6;}
.infographic-flow{margin-top: 30px;padding: 20px;border-radius: 18px;border: 1px dashed var(--border);background: var(--surface);display: grid;grid-template-columns: repeat(auto-fit,minmax(220px,1fr));gap: 18px;}
.flow-step{display: flex;flex-direction: column;gap: 6px;}
.flow-step strong{font-size: 15px;font-weight: 600;color: var(--text-main);}
.flow-step p{font-size: 14px;color: var(--text-muted);margin: 0;line-height: 1.6;}
@media (max-width: 768px){#list-intersection-page .panel{padding: 24px;}.text-input-modern{min-height: 220px;padding: 18px;}.action-buttons{grid-template-columns: 1fr;}.options-grid{grid-template-columns: 1fr;}.share-buttons{grid-template-columns: repeat(2,1fr);}.stats-grid{grid-template-columns: repeat(2,1fr);}.hero-text h1{font-size: 32px;}.tool-hero{flex-direction: column;}}