@tailwind base;@tailwind components;@tailwind utilities;body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@media (max-width:768px){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.1s!important}*{-webkit-tap-highlight-color:transparent!important;-webkit-touch-callout:none;touch-action:manipulation}.genotype-btn:active,.option.highlighted,.option:hover,.search-input:focus,button:active{transition-duration:.05s!important}.shiny-text,.shiny-text-blue,.shiny-text-green,.shiny-text-yellow{animation-duration:3s!important;animation-iteration-count:infinite!important}.calculate-btn,.options-container,nav{transform:translateZ(0);will-change:transform}.searchable-select{will-change:auto}}*{box-sizing:border-box;padding:0}*,body{margin:0}body{background:linear-gradient(135deg,#dbeafe,#eff6ff,#f0f9ff);color:#2c3e50;font-family:Microsoft YaHei,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6;min-height:100vh;overflow-x:hidden;padding:0 0 40px;position:relative}body:before{background:linear-gradient(135deg,#dbeafe99,#eff6ff66 25%,#dbeafe80 50%,#e9f6fe4d 75%,#dbeafe99);content:"";height:100%;left:0;position:fixed;top:0;width:100%;z-index:-1}.container{background:#fff;border:1px solid #dbeafe80;border-radius:30px;box-shadow:0 25px 60px #3b82f61a,0 10px 20px #3b82f60f,inset 0 1px 0 #ffffffe6;margin:0 auto;max-width:1200px;overflow:hidden;padding:0}header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2 50%,#f093fb);border-radius:30px 30px 0 0;color:#fff;display:flex;justify-content:center;margin-bottom:0;min-height:160px;overflow:hidden;padding:40px 30px;position:relative}.container header .header-user{gap:8px!important;right:30px!important}.container header .header-help,.container header .header-user{align-items:center!important;display:flex!important;position:absolute!important;top:50%!important;transform:translateY(-50%)!important;z-index:100!important}.container header .header-help{left:30px!important}@media (min-width:769px){.header-help .help-btn,.header-user .login-btn,.header-user .vip-btn{border-radius:12px!important;box-shadow:0 2px 8px #ffffff26!important;font-weight:600!important;min-height:44px!important;min-width:120px!important;transition:all .3s ease!important;width:120px!important}.header-help .help-btn:hover,.header-user .login-btn:hover{background:#ffffff4d!important;box-shadow:0 4px 16px #ffffff40!important;transform:translateY(-2px)!important}.header-user .vip-btn{box-shadow:0 4px 12px #fbbf244d,0 2px 4px #0000001a!important;font-weight:700!important;overflow:hidden!important;position:relative!important;transition:all .4s cubic-bezier(.4,0,.2,1)!important}.header-user .vip-btn:before{background:linear-gradient(135deg,#fff3,#0000)!important;content:""!important;height:100%!important;left:-100%!important;position:absolute!important;top:0!important;transition:left .6s cubic-bezier(.4,0,.2,1)!important;width:100%!important;z-index:1!important}.header-user .vip-btn:hover:before{left:100%!important}.header-user .vip-btn:hover{textShadow:"0 2px 6px rgba(124, 82, 0, 0.4)"!important;background:linear-gradient(135deg,#f59e0b,#fbbf24 50%,#fde68a)!important;border-color:#fbbf2499!important;box-shadow:0 8px 24px #fbbf2466,0 4px 8px #00000026!important;transform:translateY(-3px)!important}.header-user .vip-btn:active{box-shadow:0 4px 12px #fbbf244d,0 2px 4px #0000001a!important;transform:translateY(-1px)!important;transition:all .1s ease!important}.header-help .help-btn{border-radius:12px!important;box-shadow:0 2px 8px #ffffff26!important;font-weight:600!important;min-height:44px!important;min-width:80px!important;transition:all .3s ease!important}.header-help .help-btn:hover{background:#ffffff4d!important;box-shadow:0 4px 16px #ffffff40!important;transform:translateY(-2px)!important}}@media (max-width:768px){.container header .header-user,.header-user,header .header-user{bottom:20px!important;position:absolute!important;right:25px!important;top:auto!important;transform:none!important;z-index:100!important}.header-help .help-btn,.header-user .login-btn,.header-user .vip-btn{border-radius:12px!important;box-shadow:0 2px 8px #ffffff26!important;font-weight:600!important;min-height:44px!important;min-width:100px!important;transition:all .3s ease!important;width:100px!important}.header-user .vip-btn{box-shadow:0 4px 12px #fbbf244d,0 2px 4px #0000001a!important;font-weight:700!important;overflow:hidden!important;position:relative!important;transition:all .4s cubic-bezier(.4,0,.2,1)!important}.container header .header-help,.header-help,header .header-help{bottom:20px!important;left:25px!important;position:absolute!important;top:auto!important;transform:none!important;z-index:100!important}.header-content{align-items:center;gap:.2em;height:100%;justify-content:center;padding-left:20px;padding-right:20px;text-align:center}.header-content h1{margin:0;overflow:visible;white-space:nowrap}.header-title{padding-left:20px;padding-right:20px}.title-container{gap:.3em}}@media (max-width:480px){.container header .header-user,.header-user,header .header-user{bottom:15px!important;right:20px!important}.container header .header-help,.header-help,header .header-help{bottom:15px!important;left:20px!important}.header-content{gap:.15em}.header-content,.header-title{padding-left:15px;padding-right:15px}.title-container{gap:.25em}}@media (max-width:360px){.container header .header-user,.header-user,header .header-user{bottom:12px!important;right:15px!important}.container header .header-help,.header-help,header .header-help{bottom:12px!important;left:15px!important}.header-content{gap:.1em}.header-content,.header-title{padding-left:12px;padding-right:12px}.title-container{gap:.2em}}.header-content{gap:.3em}.header-content,.header-title{position:relative;width:100%;z-index:2}.header-content,.header-title,.title-container{align-items:center;display:flex;justify-content:center}.title-container{flex-wrap:nowrap;gap:.5em}.title-icon{flex-shrink:0;height:clamp(2.2em,7vw,4em);transition:all .3s ease;width:clamp(2.2em,7vw,4em)}.left-icon{order:1}.right-icon{order:3;transform:scaleX(-1)}.title-container h1{margin:0;order:2}header:before{animation:rotate 20s linear infinite;background:radial-gradient(circle,#ffffff1a 0,#0000 70%);content:"";height:200%;left:-50%;position:absolute;top:-50%;width:200%}header *{position:relative;z-index:1}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}h1{-webkit-text-fill-color:#0000;animation:shimmer 3s ease-in-out infinite;background:linear-gradient(45deg,#fff,#f8f9fa,#fff);-webkit-background-clip:text;background-clip:text;font-size:4.2em;margin:0;text-align:center;text-shadow:2px 2px 4px #0000004d,0 0 20px #ffffff4d}@media (max-width:768px){h1{font-size:clamp(2em,6vw,3.5em)}}@media (max-width:600px){h1{font-size:clamp(1.8em,5.5vw,3em)}}@media (max-width:480px){h1{font-size:clamp(1.6em,5.2vw,2.6em)}}@media (max-width:400px){h1{font-size:clamp(1.5em,5vw,2.4em)}}@media (max-width:350px){h1{font-size:clamp(1.4em,4.8vw,2.2em)}}@media (max-width:300px){h1{font-size:clamp(1.3em,4.5vw,2em)}}@media (max-width:280px){h1{font-size:clamp(1.2em,4.2vw,1.8em)}}@keyframes shimmer{0%,to{background-position:-200%}50%{background-position:200%}}.section{background:#fff;border:1px solid #dbeafe66;border-radius:20px;box-shadow:0 10px 30px #3b82f614,0 5px 15px #3b82f60a,inset 0 1px 0 #ffffffe6;margin:30px;padding:25px 40px 40px;transition:all .6s cubic-bezier(.4,0,.2,1)}h2{font-size:2.8em;font-weight:800;padding:10px 0 20px;position:relative;text-align:center;text-shadow:2px 2px 4px #667eea33}h2,h3{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;color:#667eea;margin-bottom:20px}h3{font-size:1.8em;font-weight:700}h4{color:#495057;font-size:1.3em;font-weight:600;margin-bottom:15px}.tips-inline{background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4caf5033;border-radius:15px;margin:0 auto 20px;max-width:750px;padding:18px 25px}.tips-inline h4{color:#4caf50;font-size:1.2em;font-weight:600;margin-bottom:15px}.tips-inline ul{list-style:none;margin:0;padding:0}.tips-inline li{color:#495057;line-height:1.6;padding:8px 0 8px 25px;position:relative}.gene-category{margin-bottom:20px}.gene-category-title{align-items:center;border:2px solid;border-radius:15px;box-shadow:0 4px 15px #0000001a;display:flex;font-size:1.95em;font-weight:600;justify-content:center;letter-spacing:1px;margin-bottom:15px;min-height:75px;padding:22px 35px;text-align:center}.gene-category-title.autosomal{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-color:#42a5f5;color:#1565c0}.gene-category-title.sex-linked{background:linear-gradient(135deg,#fce4ec,#f8bbd9);border-color:#e91e63;color:#c2185b}.genotype-buttons{grid-gap:18px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:20px 0 15px}.genotype-btn{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:25px;box-shadow:0 8px 25px #667eea4d;color:#fff;cursor:pointer;display:flex;flex-direction:column;font-size:24px;font-weight:600;justify-content:center;min-height:130px;overflow:hidden;padding:40px 50px;position:relative;text-align:center;transition:all .4s cubic-bezier(.4,0,.2,1)}.genotype-btn:before{background:linear-gradient(135deg,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .4s cubic-bezier(.4,0,.2,1);width:100%}.genotype-btn:hover:before{left:100%}@media (min-width:769px){.genotype-btn:hover{box-shadow:0 15px 40px #667eea80;transform:translateY(-6px)}.genotype-btn.active{box-shadow:0 12px 35px #28a74580;transform:translateY(-4px)}.genotype-btn.active,.genotype-btn.active:hover{background:linear-gradient(135deg,#28a745,#20c997)}.genotype-btn.active:hover{box-shadow:0 18px 45px #28a74599;transform:translateY(-6px)}}.gene-name-cn{display:block;font-size:24px;font-weight:700;margin-bottom:6px}.gene-name-en{display:block;font-size:19.5px;font-style:italic;font-weight:500;opacity:.9}.parent-selectors{grid-gap:25px;display:grid;gap:25px;grid-template-columns:1fr 1fr;margin:20px 0}.parent-selector{background:#fff;border:2px solid #e9ecef;border-radius:15px;box-shadow:0 5px 15px #0000000d;padding:25px;transition:all .3s ease}.parent-selector:hover{border-color:#667eea;box-shadow:0 8px 25px #667eea26}.parent-selector h4{align-items:center;border-bottom:2px solid #e9ecef;color:#667eea;display:flex;font-size:1.3em;justify-content:center;margin:0;min-height:40px;padding:5px 15px}.parent-symbol{font-size:3em!important;font-weight:900!important;margin-bottom:20px;padding:8px 15px}.male-symbol{color:#1976d2!important}.female-symbol{color:#e91e63!important}.phenotype-display{align-items:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px solid #dee2e6;border-radius:15px;box-shadow:0 4px 12px #00000014;display:flex;justify-content:center;margin:20px 0;min-height:80px;padding:20px 25px;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1)}.phenotype-text{color:#495057;font-size:19px;font-weight:700;line-height:1.4}.phenotype-display.active{background:linear-gradient(135deg,#d4edda,#c3e6cb);border-color:#28a745;box-shadow:0 6px 20px #28a7454d;transform:translateY(-2px)}.phenotype-display.active .phenotype-text{color:#155724;font-size:20px;font-weight:800}.gene-inputs{gap:15px}.gene-input-group,.gene-inputs{display:flex;flex-direction:column}.gene-input-group{gap:8px}.gene-input-group label{color:#495057;font-size:16px;font-weight:700}input,select{background:#fff;border:2px solid #dee2e6;border-radius:12px;box-shadow:0 3px 10px #00000014;font-size:16px;font-weight:500;min-height:58px;padding:18px 24px;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}input:focus,select:focus{border-color:#667eea;box-shadow:0 0 0 4px #667eea26;outline:none;transform:translateY(-1px)}.calculate-button-container{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin:25px 0;text-align:center}.calculate-btn{background:linear-gradient(135deg,#28a745,#20c997,#17a2b8);border:none;border-radius:30px;box-shadow:0 10px 30px #28a74566;color:#fff;cursor:pointer;font-size:20px;font-weight:800;letter-spacing:.8px;min-height:68px;overflow:hidden;padding:22px 55px;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1)}.calculate-btn:before{background:linear-gradient(135deg,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s cubic-bezier(.4,0,.2,1);width:100%}.calculate-btn:hover:before{left:100%}.calculate-btn:hover{box-shadow:0 15px 40px #28a74580;transform:translateY(-5px)}.calculate-btn:active{transform:translateY(-2px);transition:all .1s ease}@keyframes shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-6px)}20%,40%,60%,80%{transform:translateX(6px)}}.calculate-btn.shake{animation:shake .6s ease-in-out}.clear-btn{background:linear-gradient(135deg,#f093fb,#f5576c);border:none;border-radius:25px;box-shadow:0 8px 25px #f093fb66;color:#fff;cursor:pointer;font-size:16px;font-weight:700;letter-spacing:.5px;min-height:60px;overflow:hidden;padding:18px 35px;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);white-space:nowrap}.clear-btn:before{background:linear-gradient(135deg,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s cubic-bezier(.4,0,.2,1);width:100%}.clear-btn:hover:before{left:100%}.clear-btn:hover{background:linear-gradient(135deg,#f5576c,#f093fb);box-shadow:0 12px 35px #f093fb80;transform:translateY(-4px)}.clear-btn:active{transform:translateY(-1px);transition:all .1s ease}@media (max-width:768px){.calculate-button-container{align-items:center;flex-direction:column;gap:12px}.calculate-btn,.clear-btn{max-width:280px;min-width:200px;width:100%}.calculate-btn{font-size:18px;min-height:60px;padding:18px 40px}.clear-btn{font-size:15px;min-height:54px;padding:15px 30px}}.results{background:linear-gradient(135deg,#d4edda,#c3e6cb);border:2px solid #0000;border-radius:20px;box-shadow:0 10px 30px #28a74533,0 5px 15px #28a7451a,inset 0 1px 0 #fffc;margin-top:30px;overflow:hidden;padding:30px;position:relative}.results:before{background:linear-gradient(135deg,#28a745,#20c997);border-radius:20px;bottom:0;left:0;padding:2px;right:0;top:0}.results:after,.results:before{content:"";position:absolute;z-index:-1}.results:after{background:linear-gradient(135deg,#d4edda,#c3e6cb);border-radius:18px;bottom:2px;left:2px;right:2px;top:2px}.results h4{color:#667eea;font-size:1.5em;margin-bottom:20px;text-align:center}.table-container{-webkit-overflow-scrolling:touch;box-shadow:0 5px 15px #00000014;margin:20px 0;overflow-x:auto;overflow-y:visible;scrollbar-color:#667eea #f8f9fa;scrollbar-width:thin}.table-container,table{background:#fff;border-radius:10px;width:100%}table{border-collapse:collapse;margin:0;min-width:600px;overflow:hidden;table-layout:fixed}td,th{border-bottom:1px solid #dee2e6;padding:12px 15px;text-align:left;vertical-align:middle;white-space:nowrap}td:first-child,th:first-child{text-align:center;width:15%}td:nth-child(2),th:nth-child(2){word-wrap:break-word;text-align:center;white-space:normal;width:65%}td:nth-child(2){border-right:1px solid #e9ecef}td:last-child,th:last-child{text-align:center;width:20%}td:last-child{border-left:1px solid #e9ecef}th{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600;position:sticky;top:0;z-index:10}@media (min-width:769px){.cell-hover{background-color:#f0f4ff!important}.cell-hover,.sex-group-hover{transition:background-color .2s ease}.sex-group-hover{background-color:#e3f2fd!important}.probability-group-hover{background-color:#e8f5e8!important;transition:background-color .2s ease}}@media (max-width:768px){.cell-hover,.probability-group-hover,.sex-group-hover,.tree-expandable{background-color:inherit!important;background:inherit!important;transition:none!important}.tree-expandable{-webkit-user-select:none!important;user-select:none!important}.results-table td,.results-table tr,.tree-content,.tree-expandable{-webkit-tap-highlight-color:transparent!important;-webkit-touch-callout:none!important}}.male-sex{color:#1976d2}.female-sex,.male-sex{cursor:default;font-weight:700}.female-sex{color:#e91e63}.table-container::-webkit-scrollbar{height:8px}.table-container::-webkit-scrollbar-track{background:#f8f9fa;border-radius:4px}.table-container::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px}.table-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#764ba2,#f093fb)}.tree-table .tree-cell{display:table-cell;padding:12px 8px;vertical-align:middle}.female-sex,.male-sex{position:relative;text-align:center;vertical-align:middle}.sex-first-cell{position:relative;vertical-align:top!important}.sex-symbol{font-size:20px;z-index:10!important}.probability-first-cell{position:relative;vertical-align:top!important}.probability-symbol{align-items:center;color:#2196f3;display:flex;font-size:16px;font-weight:600;height:100%;height:calc(var(--probability-row-count, 1)*100%);justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:10!important}.probability-cell:empty{border-top:none!important}.probability-cell:empty,.probability-first-cell{border-bottom:none!important}@media (max-width:768px){.sex-symbol{font-size:18px!important}.probability-symbol{font-size:16px!important}}.female-sex:empty,.male-sex:empty{border-bottom:none!important;border-top:none!important}.sex-first-cell{border-bottom:none!important}.results-table-container table .female-sex,.results-table-container table .male-sex,.table-container table .female-sex,.table-container table .male-sex,table.results-table .female-sex,table.results-table .male-sex{border:1px solid #e9ecef!important;border-bottom:none!important;border-top:none!important}.results-table-container table tbody tr:last-child .female-sex,.results-table-container table tbody tr:last-child .male-sex,.table-container table tbody tr:last-child .female-sex,.table-container table tbody tr:last-child .male-sex,table.results-table tbody tr:last-child .female-sex,table.results-table tbody tr:last-child .male-sex{border-bottom:1px solid #e9ecef!important}td.female-sex,td.male-sex{border-bottom:none!important;border-top:none!important}tbody tr:last-child td.female-sex,tbody tr:last-child td.male-sex{border-bottom:1px solid #e9ecef!important}.sex-divider-row{background:#0000!important;border-bottom:none!important;border-top:none!important;height:4px!important}@media (max-width:768px){.results-table .sex-divider-row,.results-table-container .results-table .sex-divider-row,tr.sex-divider-row{border:none!important;height:0!important;line-height:0!important;margin:0!important;max-height:0!important;min-height:0!important;overflow:visible!important;padding:0!important}}.sex-divider-cell,.sex-divider-row:hover{background:#0000!important}.sex-divider-cell{border:none!important;height:4px!important;padding:0!important;position:relative}@media (max-width:768px){.results-table .sex-divider-cell,.results-table-container .results-table .sex-divider-cell,td.sex-divider-cell{border:none!important;height:0!important;line-height:0!important;margin:0!important;max-height:0!important;min-height:0!important;overflow:visible!important;padding:0!important}}.sex-divider-line{background:linear-gradient(135deg,#667eea,#764ba2 50%,#f093fb);border-radius:0;box-shadow:0 1px 2px #667eea4d;height:4px;left:0;margin:0;position:absolute;right:0;top:0;width:100%;z-index:2}@media (max-width:768px){.sex-divider-line{box-shadow:0 1px 2px #667eea4d!important;height:3px!important;top:0!important}}.tree-expand-icon{display:inline-block;filter:brightness(1.1);font-size:16px;font-weight:700;height:20px;line-height:20px;margin-right:8px;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;width:20px}@media (min-width:769px){.tree-expand-icon{transition:transform .3s ease}}.tree-expandable{cursor:pointer}@media (min-width:769px){.tree-expandable{transition:background-color .2s ease}}.tree-content{display:inline;font-weight:inherit;vertical-align:middle}.tree-child{background-color:#f8f9fa80;display:none}.tree-child-cell{padding-left:40px!important}.tree-indent{background:linear-gradient(90deg,#dee2e6,#0000);height:1px;margin-right:8px;position:relative;width:20px}.tree-indent:before{background:#dee2e6;content:"";height:16px;left:0;position:absolute;top:-8px;width:1px}.tree-child .tree-content{color:#6c757d;font-size:.9em;font-style:italic}.tree-child td:first-child{border-left:3px solid #667eea33}.results-table td.probability-cell{border-bottom:1px solid #e9ecef;border-left:1px solid #e9ecef;border-top:1px solid #e9ecef}@media (max-width:768px){.container{border-radius:15px;margin:10px}header{border-radius:15px 15px 0 0;padding:40px 20px}h1{font-size:clamp(1.8em,5.5vw,3.2em);line-height:1.2;max-width:100%;overflow:visible;text-overflow:clip;white-space:nowrap}.section{margin:15px;padding:25px}.genotype-buttons{grid-template-columns:1fr}.parent-symbol{font-size:2.5em!important}.calculate-btn{font-size:18px;min-height:58px;padding:18px 40px}.tips-inline{margin-bottom:20px;padding:20px}.tips-inline h4{font-size:1.1em;margin-bottom:12px}.parent-selectors{display:flex;flex-direction:row;gap:8px;margin:20px -5px;padding:0}.parent-selector{background:#fff;border:2px solid #e9ecef;border-radius:12px;box-shadow:0 3px 12px #0000001a;display:flex;flex:1 1;flex-direction:column;min-width:0;padding:12px 8px}.parent-selector h4{border-bottom:none!important;font-size:1.8em!important;font-weight:900!important;margin:0 0 12px!important;min-height:auto!important;padding:5px 0!important;text-align:center!important}.parent-selector h4.male-symbol{color:#1976d2!important}.parent-selector h4.female-symbol{color:#e91e63!important}.phenotype-display{align-items:center!important;background:linear-gradient(135deg,#f8f9fa,#e9ecef)!important;border:2px solid #dee2e6!important;border-radius:10px!important;display:flex!important;font-size:13px!important;justify-content:center!important;margin:0 0 12px!important;min-height:55px!important;padding:12px 8px!important;text-align:center!important}.phenotype-text{color:#495057!important;font-size:13px!important;font-weight:600!important;line-height:1.3!important;word-break:break-word!important}.phenotype-display.active{background:linear-gradient(135deg,#d4edda,#c3e6cb)!important;border-color:#28a745!important;transform:none!important}.phenotype-display.active .phenotype-text{color:#155724!important;font-weight:700!important}.gene-inputs{gap:8px!important;margin-top:0!important}.parent-selector select{background:#fff!important;border:2px solid #dee2e6!important;border-radius:8px!important;box-sizing:border-box!important;color:#495057!important;font-size:14px!important;font-weight:500!important;line-height:1.4!important;min-height:50px!important;padding:14px 10px!important;transition:all .3s ease!important;width:100%!important}.parent-selector select:focus{border-color:#667eea!important;box-shadow:0 0 0 3px #667eea26!important;outline:none!important}.parent-selector select option{background:#fff!important;color:#495057!important;font-size:14px!important;line-height:1.4!important;padding:8px 10px!important}.parent-selector .gene-input-group label{color:#495057!important;font-size:12px!important;font-weight:600!important;margin-bottom:4px!important}@media (max-width:480px){.parent-selectors{gap:6px!important;margin:20px -8px!important;padding:0!important}.parent-selector{padding:10px 6px!important}.parent-selector h4{font-size:1.6em!important;margin-bottom:10px!important}.phenotype-display{min-height:50px!important;padding:10px 6px!important}.phenotype-text{font-size:12px!important}.parent-selector select{font-size:13px!important;min-height:46px!important;padding:12px 8px!important}.parent-selector .gene-input-group label{font-size:11px!important}}.results-table-container{-webkit-overflow-scrolling:touch;background:#fff;border-radius:20px;box-shadow:0 5px 15px #00000014;margin:20px -10px;overflow-x:auto;scrollbar-color:#667eea #f8f9fa;scrollbar-width:thin}.results-table{background:#fff!important;border-collapse:collapse!important;border-radius:20px!important;display:table!important;font-size:16px!important;min-width:100%!important;overflow:hidden!important;table-layout:fixed!important;width:100%!important}.results-table-container::-webkit-scrollbar{height:6px}.results-table-container::-webkit-scrollbar-track{background:#f8f9fa;border-radius:3px}.results-table-container::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:3px}.results-table-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#764ba2,#f093fb)}.results-table tbody tr,.results-table thead tr{display:table-row!important}.results-table tbody tr td,.results-table thead tr th{display:table-cell!important}.results-table thead{display:table-header-group!important}.results-table tbody{display:table-row-group!important}.results-table tr{display:table-row!important}.results-table .tree-child[style*="display: none"]{display:none!important}.results-table .tree-child{display:none}.results-table .tree-child[style*="display: table-row"]{display:table-row!important}.results-table th{border-bottom:1px solid #e9ecef!important;box-sizing:border-box!important;display:table-cell!important;line-height:1.3!important;text-align:left!important;vertical-align:middle!important}.results-table td:not(.male-sex):not(.female-sex){font-size:16px!important;padding:12px 8px!important}.results-table td.female-sex,.results-table td.male-sex,.results-table td:not(.male-sex):not(.female-sex){background:#fff!important;border-bottom:none!important;box-sizing:border-box!important;display:table-cell!important;height:48px!important;line-height:1.3!important;text-align:center!important;vertical-align:middle!important}.results-table td.female-sex,.results-table td.male-sex{border-top:none!important;font-size:18px!important;position:relative}.results-table td.probability-cell{background:#fff!important;border:1px solid #e9ecef!important;border-top:none!important;box-sizing:border-box!important;color:#2196f3!important;display:table-cell!important;line-height:1.3!important;padding:12px 6px!important;position:relative;text-align:center!important;vertical-align:middle!important;white-space:nowrap!important;width:22%!important}.results-table td.probability-cell,.results-table th{border-bottom:none!important;font-size:16px!important;font-weight:600!important;height:48px!important}.results-table th{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;padding:12px 8px!important;position:sticky;top:0;z-index:10}.results-table th:first-child{display:table-cell!important;text-align:center!important;vertical-align:middle!important}.results-table td.female-sex,.results-table td.male-sex,.results-table th:first-child{padding:12px 8px!important;width:18%!important}.results-table td:nth-child(2),.results-table th:nth-child(2){word-wrap:break-word!important;line-height:1.3!important;padding:12px 8px!important;white-space:normal!important;width:60%!important}.results-table td:nth-child(2),.results-table th:last-child,.results-table th:nth-child(2){display:table-cell!important;font-size:16px!important;text-align:center!important;vertical-align:middle!important}.results-table th:last-child{color:#fff!important}.results-table td:last-child,.results-table th:last-child{font-weight:600!important;opacity:1!important;padding:12px 6px!important;visibility:visible!important;white-space:nowrap!important;width:22%!important}.results-table td:last-child{color:#2196f3!important;font-size:16px!important;text-align:center!important}.results-table td:last-child,.tree-table .tree-cell{display:table-cell!important;vertical-align:middle!important}.tree-table .tree-cell{border-bottom:inherit!important;box-sizing:border-box!important;height:32px!important;padding:6px 4px!important}.tree-expand-icon{display:inline-block;height:16px!important;margin-right:4px!important;text-align:center;width:18px!important}.tree-content,.tree-expand-icon{font-size:13px!important;line-height:16px!important;vertical-align:middle}.tree-content{display:inline;word-break:break-word}.tree-child-cell{background:#fff!important;font-size:12px!important;padding-left:18px!important}.tree-indent{display:inline-block;margin-right:2px!important;width:12px!important}.tree-child .tree-content{color:#666;font-size:12px!important}.genotype-row{display:none}.genotype-row,.genotype-row td{background:#fff!important;border-top:none!important}.genotype-row td{border-bottom:none!important;color:#666;font-size:12px!important;height:32px!important;vertical-align:middle!important}.genotype-row td.female-sex,.genotype-row td.male-sex{overflow:visible!important;position:relative!important}.genotype-row td:nth-child(2){padding-left:18px!important;text-align:center!important}.genotype-row .tree-content{color:#666;font-size:12px!important;font-weight:400}.results-table .genotype-row[style*="display: none"]{display:none!important}.results-table .genotype-row[style*="display: table-row"]{display:table-row!important}.phenotype-row{background:#fff!important;border-bottom:none!important}.results-table .sex-first-cell{border-bottom:none!important;border-top:none!important;position:relative;vertical-align:top!important}.results-table .sex-symbol{align-items:center;display:flex;font-size:18px!important;font-weight:700;height:100%;height:calc(var(--sex-row-count, 1)*100%);justify-content:center;left:0;pointer-events:none;position:absolute;right:0;text-shadow:0 1px 2px #0003;top:0;z-index:25!important}.male-sex .sex-symbol,.results-table .male-sex .sex-symbol,.results-table .sex-symbol:contains("♂"){color:#2196f3!important}.female-sex .sex-symbol,.results-table .female-sex .sex-symbol,.results-table .sex-symbol:contains("♀"){color:#e91e63!important}.results-table tbody tr:last-child .female-sex,.results-table tbody tr:last-child .male-sex{border-bottom:1px solid #e9ecef!important}.results-table tbody tr td.female-sex,.results-table tbody tr td.male-sex,.results-table td.female-sex,.results-table td.male-sex,.results-table-container .results-table tbody tr td.female-sex,.results-table-container .results-table tbody tr td.male-sex,.results-table-container .results-table td.female-sex,.results-table-container .results-table td.male-sex,table.results-table tbody tr td.female-sex,table.results-table tbody tr td.male-sex,table.results-table td.female-sex,table.results-table td.male-sex{border:1px solid #e9ecef!important;border-bottom:none!important;border-top:none!important}.results-table th.female-sex,.results-table th.male-sex,.results-table thead th.female-sex,.results-table thead th.male-sex{border:none!important;border-right:1px solid #e9ecef!important}.results-table tbody tr:last-child td.female-sex,.results-table tbody tr:last-child td.male-sex,.results-table-container .results-table tbody tr:last-child td.female-sex,.results-table-container .results-table tbody tr:last-child td.male-sex{border-bottom:1px solid #e9ecef!important}.genotype-row,.genotype-row *,.phenotype-row,.phenotype-row *,.results-table,.results-table *,.tree-content,.tree-expand-icon,.tree-expandable,.tree-expandable *,.tree-table,.tree-table *{animation:none!important;-webkit-animation:none!important;transform:none!important;-webkit-transform:none!important;transition:none!important;-webkit-transition:none!important}.tree-table .tree-expandable{cursor:pointer}.parent-phenotypes-info{background:linear-gradient(135deg,#f8f9ff,#e8ecff)!important;border:1px solid #667eea33!important;border-radius:15px!important;margin-bottom:20px!important;margin-left:-10px!important;margin-right:-10px!important;padding:15px 10px!important}.parent-phenotypes-info>div{align-items:center!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:8px!important;justify-content:center!important;width:100%!important}.parent-phenotypes-info>div>div{word-wrap:break-word!important;background:#fff!important;border:1px solid #667eea4d!important;border-radius:8px!important;box-sizing:border-box!important;color:#2c3e50!important;flex:1 1!important;font-size:15px!important;font-weight:600!important;line-height:1.3!important;min-width:0!important;overflow-wrap:break-word!important;padding:12px 8px!important;text-align:center!important;white-space:normal!important}.parent-phenotypes-info>div>span{color:#667eea!important;flex-shrink:0!important;font-size:20px!important;font-weight:700!important;margin:0 4px!important;text-align:center!important}.results-table .probability-cell:empty{border-bottom:none!important;border-top:none!important}.results-table .probability-first-cell{border-bottom:none!important;position:relative;vertical-align:top!important}.results-table .probability-symbol{align-items:center;color:#2196f3!important;display:flex;font-size:16px!important;font-weight:700;height:100%;height:calc(var(--probability-row-count, 1)*100%);justify-content:center;left:0;pointer-events:none;position:absolute;right:0;text-shadow:0 1px 2px #2196f333;top:0;z-index:25!important}@media (max-width:768px){.results-table .genotype-row td.female-sex,.results-table .genotype-row td.male-sex,.results-table .phenotype-row td.female-sex,.results-table .phenotype-row td.male-sex,.results-table tbody tr td.female-sex,.results-table tbody tr td.male-sex,.results-table td.female-sex,.results-table td.male-sex,.results-table tr td.female-sex,.results-table tr td.male-sex{border:1px solid #e9ecef!important;border-bottom:none!important;border-top:none!important;overflow:visible!important;position:relative!important}.results-table .sex-symbol{height:100%!important;height:calc(var(--sex-row-count, 1)*100%)!important}.results-table .probability-symbol,.results-table .sex-symbol{align-items:center!important;display:flex!important;justify-content:center!important;left:0!important;opacity:1!important;position:absolute!important;right:0!important;top:0!important;visibility:visible!important;z-index:25!important}.results-table .probability-symbol{height:100%!important;height:calc(var(--probability-row-count, 1)*100%)!important}}}@media screen and (max-width:768px){.breeding-calculator .gene-category:last-child .gene-category-title,.breeding-calculator .gene-category:last-child h4,.breeding-calculator .gene-category:nth-child(2) h4,.breeding-calculator-content .calculator-section .gene-category:last-child .gene-category-title,.breeding-calculator-content .calculator-section .gene-category:last-child h4,.breeding-calculator-content .calculator-section .gene-category:nth-child(2) h4,.breeding-calculator-content .gene-category:last-child .gene-category-title,.breeding-calculator-content .gene-category:last-child h4,.breeding-calculator-content .gene-category:nth-child(2) h4,.calculator-section .gene-category:last-child .gene-category-title,.calculator-section .gene-category:last-child h4,.calculator-section .gene-category:nth-child(2) h4,.section .gene-category:last-child .gene-category-title,.section .gene-category:last-child h4,.section .gene-category:nth-child(2) h4{border:none!important;display:none!important;height:0!important;left:-9999px!important;margin:0!important;overflow:hidden!important;padding:0!important;position:absolute!important;visibility:hidden!important}.breeding-calculator .gene-category:first-child h4,.breeding-calculator-content .calculator-section .gene-category:first-child h4,.breeding-calculator-content .gene-category:first-child h4,.calculator-section .gene-category:first-child h4,.section .gene-category:first-child h4{background:linear-gradient(135deg,#f8f9ff,#e8ecff)!important;border:1px solid #667eea33!important;border-radius:12px!important;font-size:0!important;height:auto!important;line-height:0!important;margin-bottom:15px!important;padding:12px 15px!important;position:relative!important;text-align:center!important}.breeding-calculator .gene-category:first-child h4:before,.breeding-calculator-content .calculator-section .gene-category:first-child h4:before,.breeding-calculator-content .gene-category:first-child h4:before,.calculator-section .gene-category:first-child h4:before,.section .gene-category:first-child h4:before{color:#667eea!important;content:"🧬 和尚鹦鹉基因配置"!important;font-size:18px!important;font-weight:600!important;left:50%!important;line-height:1.2!important;position:absolute!important;top:50%!important;transform:translate(-50%,-50%)!important;white-space:nowrap!important}.breeding-calculator .gene-category:last-child,.breeding-calculator-content .calculator-section .gene-category:last-child,.breeding-calculator-content .gene-category:last-child,.calculator-section .gene-category:last-child,.section .gene-category:last-child{background:#0000!important;border:none!important;height:0!important;left:0!important;margin:0!important;overflow:visible!important;padding:0!important;position:absolute!important;right:0!important;top:0!important;z-index:10!important}.mobile-unified-buttons{align-items:center!important;display:flex!important;flex-wrap:nowrap!important;gap:8px!important;grid-template-columns:none!important;grid:none!important;justify-content:center!important;margin:15px auto!important;max-width:380px!important;width:100%!important}.genotype-btn{border-radius:8px!important;display:inline-flex!important;flex:none!important;flex-direction:column!important;height:64px!important;justify-content:flex-start!important;max-width:60px!important;min-width:60px!important;padding:0!important;position:relative!important;width:60px!important}.genotype-btn,.genotype-btn .gene-name-cn{align-items:center!important;margin:0!important;text-align:center!important}.genotype-btn .gene-name-cn{font-size:15px!important;font-weight:600!important;height:34px!important;line-height:1.3!important;overflow:visible!important;text-orientation:upright!important;-webkit-text-orientation:upright!important;top:50%!important;transform:translate(-50%,-50%)!important;width:20px!important;writing-mode:vertical-rl!important}.genotype-btn .gene-name-cn,.genotype-btn .gene-name-en{color:#fff!important;display:flex!important;justify-content:center!important;left:50%!important;position:absolute!important;white-space:nowrap!important}.genotype-btn .gene-name-en{align-items:center!important;bottom:6px!important;font-size:9px!important;height:10px!important;line-height:1!important;max-width:54px!important;opacity:.9!important;overflow:hidden!important;text-align:center!important;text-orientation:mixed!important;-webkit-text-orientation:mixed!important;text-overflow:ellipsis!important;transform:translateX(-50%)!important;writing-mode:horizontal-tb!important}.genotype-btn:first-child .gene-name-en{font-size:0!important}.genotype-btn:first-child .gene-name-en:after{color:#fff!important;content:"Color"!important;font-size:9px!important;line-height:1!important;opacity:.9!important}@media screen and (max-width:768px){.genotype-btn{transform:translateY(0)!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}.genotype-btn.active{background:linear-gradient(135deg,#28a745,#20c997)!important;box-shadow:0 12px 35px #28a74580!important;transform:translateY(-4px)!important}.genotype-btn:not(.active){background:linear-gradient(135deg,#667eea,#764ba2)!important;transform:translateY(0)!important}@media (hover:hover) and (pointer:fine){.genotype-btn.active:hover,.genotype-btn:not(.active):hover{transform:translateY(-6px)!important}.genotype-btn.active:hover{background:linear-gradient(135deg,#28a745,#20c997)!important;box-shadow:0 18px 45px #28a74599!important}}}}.simple-results-table .phenotype-cell{background:#fff!important;border:1px solid #e9ecef!important;border-bottom:none!important;border-top:none!important;box-sizing:border-box!important;display:table-cell!important;font-size:16px!important;height:48px!important;line-height:1.3!important;padding:12px 8px!important;text-align:center!important;vertical-align:middle!important;width:60%!important}.simple-results-table .sex-symbol-simple{color:inherit;display:inline-block;font-size:18px!important;font-weight:700;position:relative;top:0}@media (max-width:768px){.simple-results-table .female-sex,.simple-results-table .male-sex,.simple-results-table .phenotype-cell,.simple-results-table .probability-cell{font-size:16px!important;height:48px!important;padding:12px 8px!important}.simple-results-table .sex-symbol-simple{font-size:18px!important}}@media (min-width:769px){.simple-results-table .female-sex,.simple-results-table .male-sex,.simple-results-table .phenotype-cell,.simple-results-table .probability-cell{font-size:14px!important;height:32px!important;padding:6px 4px!important}.simple-results-table .sex-symbol-simple{font-size:16px!important}}#all-results-container{scrollbar-color:#28a745 #e8f5e8;scrollbar-width:thin}#all-results-container::-webkit-scrollbar{width:12px}#all-results-container::-webkit-scrollbar-track{background:#e8f5e8;border-radius:10px;box-shadow:inset 0 0 6px #0000001a;margin:5px}#all-results-container::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#28a745,#20c997);border:2px solid #e8f5e8;border-radius:10px;box-shadow:0 2px 4px #28a7454d;-webkit-transition:all .3s ease;transition:all .3s ease}#all-results-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#218838,#1e7e34);border-color:#d4edda;box-shadow:0 3px 6px #28a74580}#all-results-container::-webkit-scrollbar-thumb:active{background:linear-gradient(135deg,#1e7e34,#155724);box-shadow:0 1px 2px #28a745b3}#all-results-container::-webkit-scrollbar-corner{background:#e8f5e8}@media (max-width:768px){.container{margin:0;padding:10px}header{border-radius:20px 20px 0 0;min-height:160px;padding:20px 15px}h1{font-size:clamp(1.8em,5.5vw,3.2em);line-height:1.2;max-width:100%;overflow:visible;text-overflow:clip;white-space:nowrap}@media (max-width:600px){h1{font-size:clamp(1.8em,5.2vw,2.8em)}}@media (max-width:480px){h1{font-size:clamp(1.6em,5vw,2.4em)}}@media (max-width:400px){h1{font-size:clamp(1.5em,4.8vw,2.2em)}}@media (max-width:350px){h1{font-size:clamp(1.4em,4.5vw,2em)}}@media (max-width:300px){h1{font-size:clamp(1.3em,4.2vw,1.8em)}}@media (max-width:280px){h1{font-size:clamp(1.2em,4vw,1.6em);letter-spacing:-.2px}}.section{border-radius:15px;margin:15px 0;padding:20px 15px}.parent-symbol{font-size:2.2em}.calculate-btn{margin:20px auto;max-width:300px;width:90%}.tips-inline{border-radius:12px;margin:15px 5px;padding:15px 18px}.tips-inline h4{font-size:1.1em;margin-bottom:12px}.parent-selectors{display:flex;flex-direction:column;gap:20px;margin:20px 0}.parent-selector{background:linear-gradient(135deg,#fffffff2,#f8f9fae6);border:2px solid #ffffff4d;border-radius:18px;box-shadow:0 8px 25px #0000001f;overflow:visible;padding:20px 15px;position:relative;transition:all .3s ease}.parent-selector:hover{border-color:#667eea80;box-shadow:0 12px 35px #667eea33;transform:translateY(-2px)}.parent-selector h4{border-bottom:2px solid #667eea33;font-size:2.5em;font-weight:900;margin:0 0 15px;padding:10px 0;text-align:center;text-shadow:2px 2px 4px #0000001a}.parent-selector h4.male-symbol{color:#1976d2;text-shadow:2px 2px 4px #1976d24d}.parent-selector h4.female-symbol{color:#e91e63;text-shadow:2px 2px 4px #e91e634d}.phenotype-display{align-items:center;background:linear-gradient(135deg,#667eea0d,#764ba20d);border:2px solid #667eea33;border-radius:12px;display:flex;justify-content:center;margin-top:15px;min-height:60px;padding:15px;transition:all .3s ease}.phenotype-text{color:#667eea;font-size:16px;font-weight:600;line-height:1.4;text-align:center}.phenotype-display.active{background:linear-gradient(135deg,#667eea26,#764ba226);border-color:#667eea;box-shadow:0 6px 20px #667eea40}.phenotype-display.active .phenotype-text{color:#4c63d2;text-shadow:0 1px 3px #4c63d24d}.gene-inputs{grid-gap:12px;display:grid;gap:12px;margin-top:20px}.parent-selector select{appearance:none;background:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;background-size:16px;border:2px solid #dee2e6;border-radius:10px;box-sizing:border-box;color:#495057;font-size:15px;min-height:50px;padding:14px 35px 14px 12px;transition:all .3s ease;width:100%}.parent-selector select:focus{background-color:#f8f9ff;border-color:#667eea;box-shadow:0 0 0 3px #667eea33;outline:none}.parent-selector select option{background:#fff;color:#495057;font-size:14px;padding:10px}.parent-selector .gene-input-group label{color:#495057;display:block;font-size:14px;font-weight:600;margin-bottom:8px}@media (max-width:480px){.parent-selectors{gap:15px;margin:15px -5px}.parent-selector{border-radius:15px;padding:15px 12px}.parent-selector h4{font-size:2.2em;margin-bottom:12px}.phenotype-display{min-height:50px;padding:12px}.phenotype-text{font-size:14px}.parent-selector select{font-size:14px;min-height:45px;padding:12px 10px}.parent-selector .gene-input-group label{font-size:12px;margin-bottom:6px}}}.app-container{min-height:100vh}@keyframes gentle-float{0%,to{transform:translate(0) rotate(0deg)}25%{transform:translate(10px,-10px) rotate(1deg)}50%{transform:translate(-5px,-20px) rotate(-.5deg)}75%{transform:translate(-10px,-5px) rotate(.5deg)}}.sex-symbol{align-items:center;display:flex;font-size:18px;font-weight:700;height:100%;height:calc(var(--sex-row-count, 1)*100%);justify-content:center;left:0;pointer-events:none;position:absolute;right:0;text-shadow:0 1px 2px #0003;top:0;z-index:25}.male-sex .sex-symbol{color:#2196f3}.female-sex .sex-symbol{color:#e91e63}.tab-content{animation:slideIn .3s ease-in-out}@keyframes slideIn{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.gene-card{background:#fff;border:1px solid #667eea33;border-radius:15px;box-shadow:0 4px 15px #0000001a;margin:15px 0;padding:20px;transition:all .3s ease}.gene-card:hover{box-shadow:0 8px 25px #00000026;transform:translateY(-2px)}.color-preview{border:3px solid #fff;border-radius:50%;box-shadow:0 2px 8px #0003;display:inline-block;height:50px;margin-right:15px;width:50px}.gene-selector{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.gene-toggle{background:#fff;border:2px solid #667eea;border-radius:20px;color:#667eea;cursor:pointer;font-weight:500;padding:8px 16px;transition:all .3s ease}.gene-toggle.active{background:#667eea;color:#fff}.gene-toggle:hover{box-shadow:0 4px 12px #667eea4d;transform:translateY(-1px)}nav{background:#f8f9fa;border-bottom:1px solid #0000001a;border-radius:0;border-top:1px solid #ffffff4d;box-shadow:0 2px 10px #0000000d;margin-bottom:0;padding:20px;text-align:center}nav .nav-btn{-webkit-text-fill-color:#0000;align-items:center;background:linear-gradient(45deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;border-radius:25px;color:#667eea;display:inline-flex;font-family:KaiTi,楷体,STKaiti,"cursive";font-size:15px;font-style:normal;font-weight:700;justify-content:center;letter-spacing:2px;margin:0 10px;overflow:hidden;padding:12px 24px;position:relative;text-decoration:none;text-shadow:2px 2px 4px #667eea33;transition:all .4s cubic-bezier(.4,0,.2,1)}nav .nav-btn:before{background:linear-gradient(135deg,#667eea,#764ba2);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .4s cubic-bezier(.4,0,.2,1);width:100%;z-index:-1}nav .nav-btn:hover:before{left:0}nav .nav-btn:hover{box-shadow:0 8px 25px #667eea4d}nav .nav-btn.active,nav .nav-btn:hover{-webkit-text-fill-color:#fff;color:#fff;text-shadow:0 0 10px #fffc;transform:translateY(-2px)}nav .nav-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 8px 25px #667eea66}.page{transition:all .3s ease-in-out}.page-title{align-items:center;display:flex;justify-content:center;margin:0 0 10px;min-height:80px;text-align:center}.page-active{display:block;opacity:1;transform:translateX(0)}.page-hidden{display:none;opacity:0;transform:translateX(20px)}.phenotype-calculator-content{padding:20px 0}.unified-parent-offspring-section{background:linear-gradient(135deg,#fff,#f8f9fa);border:1px solid #ffffff4d;border-radius:20px;box-shadow:0 10px 30px #0000001a;margin-bottom:30px;padding:30px;position:relative;transition:all .3s ease}.unified-parent-offspring-section:hover{box-shadow:0 15px 40px #00000026}.parent-phenotype-selectors{grid-gap:30px;display:grid;gap:30px;grid-template-columns:1fr 1fr;margin:30px 0}.parent-with-offspring{box-sizing:border-box;max-width:100%;overflow:visible;width:100%}.female-parent-wrapper,.male-parent-wrapper{flex-shrink:0}.parent-phenotype-selector{background:linear-gradient(135deg,#fff,#f8f9fa);border:1px solid #ffffff4d;border-radius:20px;box-shadow:0 10px 30px #0000001a;padding:30px;transition:all .3s ease}.parent-phenotype-selector:hover{background:#fff;box-shadow:0 4px 15px #0000001a}.parent-symbol{font-size:24px;font-weight:700;margin-bottom:15px;text-align:center}.male-symbol{color:#1976d2}.female-symbol{color:#e91e63}.phenotype-input-group label{color:#555}.phenotype-select{border:2px solid #e0e0e0;border-radius:8px;padding:12px;transition:border-color .3s ease}.genotype-possibilities{background:linear-gradient(135deg,#e8f5e8,#d4edda);border:2px solid #28a745;color:#155724;margin-top:12px;padding:12px;transition:all .3s ease}.genotype-possibilities.impossible{background:linear-gradient(135deg,#f8d7da,#f5c6cb);border-color:#dc3545;color:#721c24}.count-number{font-size:18px;font-weight:700;margin:0 3px}.impossible-warning{background:#dc35451a;border:1px solid #dc35454d;border-radius:6px;font-size:12px;margin-top:8px;padding:8px}.expandable-section{margin-top:15px}.expand-toggle-btn{align-items:center;background:linear-gradient(135deg,#667eea1a,#764ba21a);border:1px solid #667eea4d;border-radius:8px;color:#555;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;padding:12px 16px;text-align:left;transition:all .3s ease;width:100%}.expand-toggle-btn:hover{background:linear-gradient(135deg,#dce6ff,#e6e1f5);border-color:#667eea80;box-shadow:0 2px 8px #667eea33}.toggle-icon{color:#667eea;font-size:12px;min-width:12px;transition:transform .3s ease}.expandable-content{animation:expandIn .3s ease-out;margin-top:15px}@keyframes expandIn{0%{max-height:0;opacity:0;transform:translateY(-10px)}to{max-height:1000px;opacity:1;transform:translateY(0)}}.parent-info{border-top:1px solid #e0e0e0}.parent-info h5{color:#666;font-size:14px}.grandparent-selector label{color:#777;display:block;font-weight:500;margin-bottom:6px}.grandparent-selector .phenotype-select{padding:8px}.phenotype-select-searchable{margin-bottom:12px}.grandparent-select .search-input{font-size:12px;padding:8px 30px 8px 8px}.grandparent-select .clear-button{font-size:14px;right:25px}.grandparent-select .dropdown-arrow{font-size:10px;right:8px}.offspring-info{border-top:1px solid #e0e0e0;margin-top:15px;padding-top:20px}.offspring-container,.offspring-list{display:flex;flex-direction:column}.offspring-list{gap:15px}.offspring-list:not(:empty){margin-bottom:0}.offspring-footer{display:flex;justify-content:flex-end}.offspring-info h5{color:#666;font-size:14px;margin:0}.offspring-item{gap:12px;position:relative}.offspring-selectors{grid-gap:12px;align-items:end;display:grid;gap:12px;grid-template-columns:2fr 1fr}.offspring-selector label{color:#777;display:block;font-size:12px;font-weight:500;margin-bottom:6px}.offspring-select .search-input{font-size:12px;padding:6px 25px 6px 6px}.offspring-select .clear-button{font-size:12px;right:20px}.offspring-select .dropdown-arrow{font-size:9px;right:6px}.offspring-sex-select{background:#fff;border:2px solid #e0e0e0;border-radius:6px;font-size:12px;padding:6px;transition:border-color .3s ease;width:100%}.offspring-sex-select:focus{border-color:#667eea;box-shadow:0 0 0 2px #667eea1a;outline:none}.offspring-sex-select option[value=male]{color:#1976d2}.offspring-sex-select option[value=female]{color:#e91e63}.remove-offspring-btn{font-size:16px;height:24px;margin-left:auto;margin-top:8px;transition:background-color .3s ease;width:24px}.add-offspring-btn{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 12px #667eea4d;padding:8px 16px;transition:all .3s ease}.add-offspring-btn:hover{background:linear-gradient(135deg,#5a6fd8,#6a5acd);box-shadow:0 6px 16px #667eea66;transform:translateY(-1px)}.phenotype-input-group{margin-bottom:20px}.phenotype-input-group label{color:#2c3e50;display:block;font-size:14px;font-weight:600;margin-bottom:8px}.phenotype-select{background:#fff;border:2px solid #e9ecef;border-radius:12px;color:#2c3e50;font-size:14px;padding:12px 16px;transition:all .3s ease;width:100%}.phenotype-select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.genotype-possibilities{background:#667eea1a;border-radius:8px;color:#667eea;font-size:13px;font-weight:600;margin-top:10px;padding:8px 12px}.parent-info{border-top:1px solid #0000001a;margin-top:20px;padding-top:20px}.parent-info h5{color:#5a6c7d;font-size:13px;font-weight:600;margin-bottom:15px}.grandparent-selectors{grid-gap:15px;display:grid;gap:15px;grid-template-columns:1fr 1fr}.grandparent-selector label{color:#6c757d;font-size:12px}.grandparent-selector .phenotype-select{font-size:12px;padding:8px 12px}@media (max-width:768px){.gene-selector{justify-content:center}.gene-toggles{flex-wrap:wrap;gap:8px}.gene-toggle,.gene-toggles{align-items:center;display:flex;justify-content:center}.gene-toggle{border-radius:12px;font-size:12px;font-weight:600;height:60px;line-height:1.2;min-width:45px;padding:8px 6px;text-align:center;text-orientation:mixed;writing-mode:vertical-rl}.gene-card{margin:10px 0;padding:15px}.unified-parent-offspring-section{margin-bottom:20px;padding:20px}.parent-phenotype-selectors{align-items:stretch;display:flex;flex-direction:row;gap:8px;justify-content:center;margin:25px -5px;padding:0}.parent-with-offspring{box-sizing:border-box;display:flex;flex:1 1;flex-direction:column;flex-shrink:0;min-width:0;overflow:visible}.grandparent-selectors{gap:10px;grid-template-columns:1fr}.parent-phenotype-selector{background:linear-gradient(135deg,#fffffff2,#f8f9fae6);border:2px solid #ffffff4d;border-radius:18px;box-shadow:0 8px 25px #0000001f;box-sizing:border-box;display:flex;flex-direction:column;overflow:visible;padding:20px 15px;transition:all .3s ease}.parent-phenotype-selector:hover{border-color:#667eea80;box-shadow:0 12px 35px #667eea33}.parent-symbol{border-bottom:none!important;font-size:1.8em!important;font-weight:900!important;margin:0 0 12px!important;min-height:auto!important;padding:5px 0!important;text-align:center!important}.parent-symbol.male-symbol{color:#1976d2!important}.parent-symbol.female-symbol{color:#e91e63!important}.parent-phenotype-selector .phenotype-input-group{margin-bottom:12px}.parent-phenotype-selector .phenotype-input-group label{color:#495057!important;font-size:12px!important;font-weight:600!important;margin-bottom:4px!important;text-align:center}.phenotype-select,.phenotype-select-searchable .search-input{background:#fff!important;border:2px solid #dee2e6!important;border-radius:8px!important;box-sizing:border-box!important;color:#495057!important;font-size:14px!important;font-weight:500!important;line-height:1.4!important;min-height:50px!important;padding:14px 10px!important;transition:all .3s ease!important;width:100%!important}.phenotype-select-searchable .search-input:focus,.phenotype-select:focus{border-color:#667eea!important;box-shadow:0 0 0 3px #667eea26!important;outline:none!important}.genotype-possibilities{word-wrap:break-word;align-items:center;background:#667eea0d;border:1px solid #667eea26;border-radius:6px;box-sizing:border-box;display:flex;flex-wrap:wrap;font-size:12px;justify-content:center;line-height:1.3;margin-top:5px;max-width:100%;min-height:28px;overflow:visible;overflow-wrap:break-word;padding:8px 10px;text-align:center;text-overflow:clip;white-space:normal;word-break:break-word}.count-number{font-size:16px}.impossible-warning{word-wrap:break-word!important;box-sizing:border-box!important;font-size:10px!important;line-height:1.2!important;max-width:100%!important;overflow-wrap:break-word!important;padding:6px;word-break:break-word!important}.parent-info h5{font-size:13px;margin-bottom:12px}.grandparent-selector .phenotype-select{font-size:11px;padding:6px}.grandparent-select .search-input{background:#fff!important;border:2px solid #dee2e6!important;border-radius:8px!important;box-sizing:border-box!important;color:#495057!important;font-size:14px!important;font-weight:500!important;line-height:1.4!important;min-height:50px!important;padding:14px 10px!important;transition:all .3s ease!important;width:100%!important}.grandparent-select .clear-button{font-size:12px;right:20px}.grandparent-select .dropdown-arrow{font-size:9px;right:6px}.expand-toggle-btn{font-size:13px;gap:6px;padding:10px 12px}.toggle-icon{font-size:10px}.expandable-content{margin-top:12px}.offspring-footer{justify-content:center}.offspring-item{padding:12px}.offspring-selectors{gap:10px;grid-template-columns:1fr}.offspring-selector label{font-size:11px;margin-bottom:4px}.offspring-select .search-input{font-size:11px;padding:6px 25px 6px 6px}.offspring-sex-select{font-size:11px;padding:6px}.remove-offspring-btn{font-size:14px;height:20px;right:6px;top:6px;width:20px}.add-offspring-btn{align-items:center!important;border-radius:18px!important;box-sizing:border-box!important;display:inline-flex!important;font-size:11px!important;justify-content:center!important;line-height:1.2!important;margin:0 auto!important;max-width:95%!important;min-height:36px!important;padding:10px 16px!important;text-align:center!important;white-space:nowrap!important}@media (max-width:480px){.parent-phenotype-selectors{gap:6px!important;justify-content:center!important;margin:20px -8px!important;padding:0!important}.parent-with-offspring{flex:1 1!important;flex-shrink:0!important;min-width:0!important}.parent-phenotype-selector,.parent-with-offspring{box-sizing:border-box!important;display:flex!important;flex-direction:column!important;overflow:visible!important}.parent-phenotype-selector{background:linear-gradient(135deg,#fff,#f8f9fa)!important;border:2px solid #ffffff4d!important;border-radius:15px!important;box-shadow:0 6px 20px #0000001f!important;padding:15px 10px!important;transition:all .3s ease!important}.parent-phenotype-selector:hover{border-color:#667eea80!important;box-shadow:0 10px 30px #667eea33!important}.parent-symbol{border-bottom:none!important;font-size:1.6em!important;font-weight:900!important;margin:0 0 10px!important;min-height:auto!important;padding:5px 0!important;text-align:center!important}.parent-symbol.male-symbol{color:#1976d2!important}.parent-symbol.female-symbol{color:#e91e63!important}.phenotype-select,.phenotype-select-searchable .search-input{background:#fff!important;border:2px solid #dee2e6!important;border-radius:8px!important;box-sizing:border-box!important;color:#495057!important;font-size:13px!important;font-weight:500!important;line-height:1.4!important;min-height:46px!important;padding:12px 8px!important;transition:all .3s ease!important;width:100%!important}.phenotype-select-searchable .search-input:focus,.phenotype-select:focus{border-color:#667eea!important;box-shadow:0 0 0 3px #667eea26!important;outline:none!important}.parent-phenotype-selector .phenotype-input-group label{color:#495057!important;font-size:11px!important;font-weight:600!important;margin-bottom:4px!important;text-align:center!important}.genotype-possibilities{word-wrap:break-word!important;align-items:center!important;background:#667eea14!important;border:1px solid #667eea33!important;border-radius:5px!important;box-sizing:border-box!important;display:flex!important;flex-wrap:wrap!important;font-size:10px!important;font-weight:500!important;justify-content:center!important;letter-spacing:.3px!important;line-height:1.2!important;margin-top:4px!important;max-width:100%!important;min-height:22px!important;overflow:visible!important;overflow-wrap:break-word!important;padding:6px 8px!important;text-align:center!important;text-overflow:clip!important;white-space:normal!important;word-break:break-word!important}.count-number{font-size:14px!important}.expand-toggle-btn{font-size:12px!important;padding:8px 10px!important}.impossible-warning{word-wrap:break-word!important;box-sizing:border-box!important;font-size:9px!important;line-height:1.2!important;max-width:100%!important;overflow-wrap:break-word!important;padding:4px!important;word-break:break-word!important}}nav .nav-btn{flex:1 1;font-size:12px;letter-spacing:.5px;margin:0 2px;max-width:120px;padding:8px 12px;text-align:center;white-space:nowrap}nav{flex-wrap:wrap;justify-content:center;padding:10px 5px}.mobile-unified-buttons,nav{align-items:center;display:flex;gap:4px}.mobile-unified-buttons{box-sizing:border-box;flex-wrap:nowrap;justify-content:space-between;padding:10px 8px;width:100%}.mobile-unified-buttons .genotype-btn{align-items:center;background:#fff;border:2px solid #667eea;border-radius:10px;color:#667eea;display:flex;flex:1 1;font-size:10px;font-weight:600;height:55px;justify-content:center;line-height:1.1;max-width:calc(20% - 3px);min-width:0;overflow:hidden;padding:6px 3px;text-align:center;text-orientation:mixed;transition:all .3s ease;word-break:keep-all;writing-mode:vertical-rl}.mobile-unified-buttons .genotype-btn.active{background:#667eea;color:#fff}.mobile-unified-buttons .genotype-btn:hover{box-shadow:0 4px 12px #667eea4d}@media (max-width:350px){nav{gap:3px;padding:8px 3px}nav .nav-btn{font-size:11px;letter-spacing:.3px;margin:0 1px;max-width:100px;padding:6px 8px}.mobile-unified-buttons .genotype-btn{border-radius:8px;font-size:9px;height:50px;padding:4px 2px}.mobile-unified-buttons{gap:2px;padding:8px 4px}}@media (max-width:300px){nav{gap:2px;padding:6px 2px}nav .nav-btn{font-size:10px;letter-spacing:.2px;margin:0 .5px;max-width:90px;padding:5px 6px}}}.offspring-info-section .expandable-section{margin:0 auto;max-width:500px;width:100%}.offspring-info-section .expand-toggle-btn{align-items:center;background:linear-gradient(135deg,#e6ebff,#f0ebfa);border:2px solid #667eea4d;border-radius:10px;color:#495057;cursor:pointer;display:flex;font-size:16px;font-weight:600;gap:8px;justify-content:center;padding:12px 20px;text-align:center;transition:all .3s ease;width:100%}.offspring-info-section .expand-toggle-btn:hover{background:linear-gradient(135deg,#dce6ff,#e6e1f5);border-color:#667eea80;box-shadow:0 4px 12px #667eea33}.offspring-info-section .toggle-icon{color:#667eea;font-size:14px;font-weight:700}.offspring-info-section .expandable-content{animation:expandIn .3s ease-out;margin:0 auto;max-width:500px;overflow:visible;width:100%}.unified-parent-offspring-section .offspring-info-section{align-items:center;background:none;border:none;border-radius:0;box-shadow:none;display:flex;flex-direction:column;margin:8px 0 0;padding:0}.unified-parent-offspring-section .section-header h4{align-items:center;color:#2c3e50;display:flex;font-size:18px;font-weight:600;gap:8px;margin:0 0 10px}.unified-parent-offspring-section .section-description{background:#fff6;border-left:4px solid #17a2b8b3;border-radius:8px;color:#6c757d;font-size:14px;line-height:1.5;margin:0 0 20px;padding:12px;transition:all .3s ease}.unified-parent-offspring-section .section-description:hover{background:#ffffff80;border-left-color:#17a2b8e6}.offspring-container{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000008;padding:20px}.unified-parent-offspring-section .offspring-container{background:none;border-radius:0;box-shadow:none;padding:0}.offspring-list{margin-bottom:20px}.offspring-item{align-items:center;background:none;border:none;border-radius:0;display:flex;gap:15px;margin-bottom:12px;padding:0;transition:all .2s ease}@media (min-width:769px){.offspring-header{display:contents}.offspring-header .offspring-number{order:1}.offspring-header .remove-offspring-btn{margin-left:8px;order:3;position:static;transform:none}.offspring-selectors{order:2}}.unified-parent-offspring-section .offspring-item{background:#ffffff80;border:1px solid #fff9}.unified-parent-offspring-section .offspring-item:hover{background:#ffffffb3;border-color:#17a2b880}.offspring-number{background:linear-gradient(135deg,#17a2b8,#138496);border-radius:20px;color:#fff;font-size:12px;font-weight:600;min-width:80px;padding:8px 12px;text-align:center}.offspring-selectors{align-items:stretch;display:flex;flex:1 1;gap:10px}.offspring-selectors .phenotype-input-group{margin-bottom:0}.offspring-selectors .phenotype-input-group:first-child{flex:1.8 1}.offspring-selectors .phenotype-input-group:last-child{flex:1.2 1;min-width:100px}.offspring-select,.offspring-sex-select{background:#fff;border:1px solid #ced4da;border-radius:6px;font-size:14px;padding:8px 12px;transition:all .2s ease}.offspring-select:focus,.offspring-sex-select:focus{border-color:#17a2b8;box-shadow:0 0 0 2px #17a2b840;outline:none}.remove-offspring-btn{align-items:center;background:#dc3545;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:18px;font-weight:700;height:32px;justify-content:center;margin-left:8px;min-width:32px;position:static;transform:none;transition:all .2s ease}.remove-offspring-btn:hover{background:#c82333;transform:scale(1.1)}.no-offspring-message{color:#6c757d;font-style:italic;padding:40px 20px;text-align:center}.no-offspring-message p{font-size:14px;margin:0}.offspring-add-btn-container{margin-top:8px;padding:15px 0;text-align:center}.offspring-add-btn-bottom{display:block!important;margin:15px auto 5px!important}@media (max-width:768px){.offspring-add-btn-bottom{margin:12px auto 5px!important}}.add-offspring-btn{-webkit-tap-highlight-color:transparent;background:linear-gradient(135deg,#28a745,#20c997);border:none;border-radius:20px;box-shadow:0 2px 8px #28a7454d;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-size:12px;font-weight:600;margin:0 auto;max-width:98%;outline:none;padding:10px 18px;text-align:center;transition:all .2s ease;-webkit-user-select:none;user-select:none;white-space:nowrap}.add-offspring-btn:hover{box-shadow:0 4px 15px #28a74566;transform:translateY(-2px)}.add-offspring-btn:active,.add-offspring-btn:focus{-webkit-tap-highlight-color:transparent;background:linear-gradient(135deg,#28a745,#20c997);outline:none}@media (max-width:768px){.offspring-info-section{margin:20px 0;padding:12px}.offspring-item{align-items:stretch;flex-direction:column;gap:8px;margin-bottom:12px;padding:0}.offspring-header{align-items:center;display:flex;justify-content:center;margin-bottom:6px;position:relative}.offspring-number{display:inline-block;font-size:11px;min-width:auto;padding:6px 12px;text-align:center;width:auto}.offspring-selectors{flex-direction:column;gap:8px;margin:0 -15px}.offspring-selectors .phenotype-input-group{margin:0 15px}.offspring-selectors .phenotype-input-group .searchable-select{width:100%!important}.offspring-selectors .phenotype-input-group .searchable-select .search-input{background:#fff!important;border:2px solid #dee2e6!important;border-radius:8px!important;box-sizing:border-box!important;color:#495057!important;font-size:14px!important;font-weight:500!important;line-height:1.4!important;min-height:50px!important;padding:14px 10px!important;transition:all .3s ease!important;width:100%!important}.offspring-selectors .phenotype-select-searchable{width:100%!important}.offspring-selectors .phenotype-select-searchable .search-input{background:#fff!important;border:2px solid #dee2e6!important;border-radius:8px!important;box-sizing:border-box!important;color:#495057!important;font-size:14px!important;font-weight:500!important;line-height:1.4!important;min-height:50px!important;padding:14px 10px!important;transition:all .3s ease!important;width:100%!important}.remove-offspring-btn{font-size:14px;height:24px;margin:0;min-width:24px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.tips-title-centered{color:#2c3e50;font-size:18px;font-weight:600;margin:0 auto 20px;text-align:center}.tips-list{counter-reset:tip-counter;list-style:none;margin:0 auto;max-width:800px;padding-left:0}.tips-list li{background:linear-gradient(135deg,#667eea0d,#764ba208);border-left:4px solid #667eea99;border-radius:12px;color:#2c3e50;counter-increment:tip-counter;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:15px;font-weight:500;letter-spacing:.3px;line-height:1.7;margin-bottom:16px;padding:16px 20px 16px 60px;position:relative;transition:all .3s ease}.tips-list li:before{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;box-shadow:0 2px 8px #667eea4d;color:#fff;content:counter(tip-counter);display:flex;font-size:12px;font-weight:700;height:28px;justify-content:center;left:20px;position:absolute;top:50%;transform:translateY(-50%);width:28px}.tips-list li:hover{background:linear-gradient(135deg,#667eea14,#764ba20d);border-left-color:#667eeacc;box-shadow:0 4px 12px #667eea26;transform:translateY(-1px)}.tips-grid{grid-gap:15px 25px;display:grid;gap:15px 25px;grid-template-columns:1fr 1fr;margin:0 auto;max-width:800px}.tip-item{align-items:flex-start;background:linear-gradient(135deg,#667eea14,#764ba20d);border:1px solid #667eea33;display:flex;gap:12px;min-height:60px;padding:12px 15px;transition:all .3s ease}.tip-item:hover{background:linear-gradient(135deg,#667eea1f,#764ba214);border-color:#667eea4d;box-shadow:0 4px 12px #667eea26;transform:translateY(-2px)}.tip-number{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:12px;font-weight:700;height:24px;justify-content:center;margin-top:2px;width:24px}.tip-text{color:#495057;font-size:14px;font-weight:500;line-height:1.4}@media (max-width:768px){.tips-list li{border-radius:10px;font-size:14px;line-height:1.6;margin-bottom:14px;padding:14px 16px 14px 50px}.tips-list li:before{font-size:11px;height:24px;left:16px;width:24px}}.genotype-analysis{background:linear-gradient(135deg,#f8f9ff,#e8f4fd);border:2px solid #667eea33;border-radius:15px;box-shadow:0 4px 15px #667eea1a;margin:20px 0;padding:25px}.genotype-analysis h5{color:#667eea;font-size:18px;font-weight:600;margin:0 0 20px;text-align:center}.genotype-details{grid-gap:20px;display:grid;gap:20px}.genotype-section{background:#fff;border:1px solid #667eea26;border-radius:12px;padding:20px}.genotype-section h6{align-items:center;color:#555;display:flex;font-size:14px;font-weight:600;gap:8px;margin:0 0 15px}.genotype-list{grid-gap:8px;display:grid;gap:8px}.genotype-item{align-items:center;background:#f8f9fa;border:2px solid #0000;border-radius:8px;display:flex;font-family:Courier New,monospace;font-size:13px;justify-content:space-between;padding:10px 15px;transition:all .3s ease}.genotype-item.selected{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-color:#2196f3;color:#1976d2;font-weight:600}.selected-tag{background:#4caf50;border-radius:12px;color:#fff;font-family:system-ui,-apple-system,sans-serif;font-size:10px;font-weight:600;padding:2px 8px}.selected-genotypes{background:linear-gradient(135deg,#fff3e0,#ffe0b2);border:2px solid #ff9800;border-radius:12px;margin-top:10px;padding:20px}.selected-genotypes h6{color:#f57c00;font-size:14px;font-weight:600;margin:0 0 15px;text-align:center}.calculation-genotypes{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.calc-genotype{background:#fff;border:2px solid #ff9800;border-radius:10px;box-shadow:0 2px 8px #ff980033;font-family:Courier New,monospace;font-weight:600;padding:12px 20px}.calc-genotype.male{border-color:#2196f3;box-shadow:0 2px 8px #2196f333;color:#1976d2}.calc-genotype.female{border-color:#e91e63;box-shadow:0 2px 8px #e91e6333;color:#c2185b}.times-symbol{color:#ff9800;font-size:20px;font-weight:700}.offspring-distribution{background:linear-gradient(135deg,#f3e5f5,#e1bee7);border:2px solid #9c27b033;border-radius:15px;box-shadow:0 4px 15px #9c27b01a;margin:20px 0;padding:25px}.offspring-distribution h5{color:#7b1fa2;font-size:18px;font-weight:600;margin:0 0 20px;text-align:center}@media (max-width:768px){.genotype-analysis,.offspring-distribution{margin:15px 0;padding:15px}.genotype-section{padding:15px}.genotype-item{font-size:12px;padding:8px 12px}.calculation-genotypes{gap:10px}.calc-genotype{font-size:12px;padding:8px 15px}.times-symbol{font-size:16px}}.offspring-connection-lines{height:100%;left:0;overflow:visible;pointer-events:none;position:absolute;top:0;width:100%;z-index:5}.offspring-connection-line{box-shadow:0 1px 3px #0000001a;position:relative;transition:all .3s ease}.offspring-connection-line:before{background:#2196f3;left:-4px}.offspring-connection-line:after,.offspring-connection-line:before{border-radius:50%;content:"";height:4px;opacity:.8;position:absolute;top:-1px;width:8px}.offspring-connection-line:after{background:#e91e63;right:-4px}.offspring-item:hover~.offspring-connection-lines .offspring-connection-line[data-sync-id]{box-shadow:0 2px 8px #667eea66;opacity:1!important;transform:scaleY(1.5)}.parent-phenotype-selectors{overflow:visible;position:relative}@media (max-width:768px){.offspring-connection-lines{display:none}}@keyframes connectionPulse{0%,to{opacity:.7}50%{opacity:1}}.offspring-connection-line{animation:connectionPulse 2s ease-in-out infinite}.custom-alert-overlay{align-items:center;background:#00000080;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.custom-alert-modal{animation:alertFadeIn .3s ease-out;background:#fff;border-radius:15px;box-shadow:0 10px 30px #0000004d;max-width:400px;padding:0;width:90%}.custom-alert-content{padding:30px;text-align:center}.custom-alert-content h3{color:#667eea;font-size:20px;font-weight:700;margin:0 0 15px}.custom-alert-content p{color:#555;font-size:16px;line-height:1.5;margin:0 0 25px}.custom-alert-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:25px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;min-width:100px;padding:12px 30px;transition:all .3s ease}.custom-alert-btn:hover{box-shadow:0 8px 25px #667eea4d;transform:translateY(-2px)}@keyframes alertFadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (max-width:768px){.custom-alert-modal{max-width:350px;width:85%}.custom-alert-content{padding:25px}.custom-alert-content h3{font-size:18px}.custom-alert-content p{font-size:15px}.custom-alert-btn{font-size:15px;padding:10px 25px}}.gene-introduction{margin:0 auto;max-width:1200px;padding:10px 20px 20px}.gene-overview-section{margin-bottom:30px}.study-guide-separator{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px solid #dee2e6;border-radius:15px;margin:40px 0 30px;padding:20px;text-align:center}.study-guide-separator h3{color:#495057;font-size:24px;margin:0 0 10px}.study-guide-separator p{color:#6c757d;font-size:16px;margin:0}.gene-nav-horizontal{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.gene-nav-horizontal .genotype-btn{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:15px;box-shadow:0 6px 20px #667eea4d;color:#fff;cursor:pointer;display:flex;flex:1 1;flex-direction:column;font-weight:600;height:80px;justify-content:center;max-width:180px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:120px}.gene-nav-horizontal .genotype-btn:hover{box-shadow:0 12px 30px #667eea66;transform:translateY(-6px)}.gene-nav-horizontal .genotype-btn.active{background:linear-gradient(135deg,#28a745,#20c997);box-shadow:0 12px 30px #28a74580;transform:translateY(-6px)}.gene-nav-horizontal .genotype-btn.active:hover{background:linear-gradient(135deg,#28a745,#20c997);box-shadow:0 16px 40px #28a74599;transform:translateY(-8px)}.gene-nav-horizontal .gene-name-cn{font-size:18px;font-weight:600;line-height:1.2;margin-bottom:6px}.gene-nav-horizontal .gene-name-cn,.gene-nav-horizontal .gene-name-en{color:#fff;max-width:110px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.gene-nav-horizontal .gene-name-en{font-size:12px;line-height:1;opacity:.9}.gene-nav-container{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:15px;box-shadow:0 4px 12px #0000001a;margin-bottom:30px;padding:20px}.gene-nav{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));max-width:100%}.gene-nav-btn{align-items:center;background:#fff;border:2px solid #e0e0e0;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;min-height:80px;padding:15px 10px;text-decoration:none;transition:all .3s ease}.gene-nav-btn:hover{border-color:#6c757d;box-shadow:0 6px 20px #00000026;transform:translateY(-2px)}.gene-nav-btn.active{background:linear-gradient(135deg,#6c757d,#495057);border-color:#495057;box-shadow:0 6px 20px #6c757d4d;color:#fff}.gene-icon{display:block;font-size:24px;margin-bottom:8px}.gene-title{font-size:14px;font-weight:600;line-height:1.2;text-align:center}.gene-content{background:#fff;border-radius:15px;box-shadow:0 4px 20px #0000001a;margin-top:10px;overflow:hidden}.gene-content-header{align-items:center;background:linear-gradient(135deg,#28a745,#20c997 50%,#17a2b8);border:3px solid #fff3;box-shadow:0 8px 25px #28a74566,0 4px 15px #20c9974d,inset 0 1px 0 #fff3;color:#fff;display:flex;justify-content:center;padding:25px 30px}.gene-content-header h2{-webkit-text-fill-color:#fff!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:#fff!important;font-size:32px;font-weight:600;margin:0;text-align:center}.gene-detail-header{background:linear-gradient(135deg,#667eea,#764ba2 50%,#f093fb);color:#fff;padding:25px 30px;text-align:center}.gene-detail-header h2{-webkit-text-fill-color:#0000!important;animation:shimmer 3s ease-in-out infinite!important;background:linear-gradient(45deg,#fff,#f8f9fa,#fff)!important;-webkit-background-clip:text!important;background-clip:text!important;background-size:200% center!important;font-size:28px;font-weight:700;margin:0;text-align:center;text-shadow:none!important}.gene-content-body{color:#333;line-height:1.6;padding:30px}.gene-detail{max-width:100%}.gene-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:25px}.gene-header h3{color:#2c3e50;font-size:24px;margin:0}.gene-info-badge{display:flex;flex-wrap:wrap;gap:10px}.gene-symbol,.inheritance-type{border-radius:20px;font-size:12px;font-weight:600;letter-spacing:.5px;padding:8px 12px;text-transform:uppercase}.inheritance-type{background:linear-gradient(135deg,#ff9a9e,#fecfef);color:#8b4b8a}.gene-symbol{background:linear-gradient(135deg,#a8edea,#fed6e3);color:#2c5aa0;font-family:Courier New,monospace}.gene-mechanism{background:#f8f9fa;border-radius:10px;margin-bottom:25px;padding:20px}.mechanism-details{display:flex;flex-wrap:wrap;gap:15px;margin-top:15px}.process-step{align-items:center;background:#fff;border-radius:25px;box-shadow:0 2px 8px #0000001a;display:flex;flex:1 1;gap:8px;min-width:200px;padding:10px 15px}.step-number{background:#4a90e2;font-size:12px;height:24px;width:24px}.step-text{font-size:14px;font-weight:500}.phenotype-info{margin-bottom:25px}.phenotype-list{background:#f8f9fa;border-radius:10px;list-style:none;padding:20px}.phenotype-list li{border-bottom:1px solid #e9ecef;padding:8px 0}.phenotype-list li:last-child{border-bottom:none}.phenotype-list strong{color:#4a90e2;display:inline-block;min-width:80px}.genetic-table{background:#fff;border-collapse:collapse;border-radius:8px;box-shadow:0 2px 8px #0000001a;margin:15px 0;overflow:hidden;table-layout:fixed;width:100%}.genetic-table td,.genetic-table th{word-wrap:break-word;border-bottom:1px solid #e9ecef;font-size:13px;overflow-wrap:break-word;padding:10px 6px;text-align:left}.genetic-table td:first-child,.genetic-table th:first-child{min-width:60px;width:18%}.genetic-table td:nth-child(2),.genetic-table th:nth-child(2){min-width:90px;width:32%}.genetic-table td:nth-child(3),.genetic-table th:nth-child(3){min-width:140px;width:50%}.genetic-table th{background:#4a90e2;color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.genetic-table tr:hover{background:#f8f9fa}.genetic-table tr:last-child td{border-bottom:none}.inheritance-pattern{grid-gap:15px;display:grid;gap:15px;grid-template-columns:1fr 1fr;margin:20px 0}.inheritance-pattern .female-inheritance,.inheritance-pattern .male-inheritance{min-width:0;overflow-x:visible}.inheritance-pattern .genetic-table{font-size:12px}.inheritance-pattern .genetic-table td,.inheritance-pattern .genetic-table th{font-size:12px;padding:6px 4px}.gene-overview{line-height:1.7;margin:0 auto;max-width:1000px;padding:0 20px;text-align:center}.gene-categories{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:25px 0;text-align:left}.category{background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a;padding:20px}.category.autosomal{border-left:5px solid #4a90e2}.category.sex-linked{border-left:5px solid #ff69b4}.category h4{color:#2c3e50;margin-top:0}.color-formation,.inheritance-info{background:#f8f9fa;border-radius:10px;margin:20px 0;padding:20px;text-align:left}.color-formula{background:linear-gradient(135deg,#28a745,#20c997 50%,#17a2b8);border:3px solid #fff3;border-radius:18px;box-shadow:0 8px 25px #28a74566,0 4px 15px #20c9974d,inset 0 1px 0 #fff3;color:#fff;font-size:18px;font-weight:700;letter-spacing:1px;margin:20px 0;overflow:hidden;padding:25px 30px;position:relative;text-align:center;transform:translateY(0);transition:all .3s ease}.color-formula:hover{box-shadow:0 12px 35px #28a74580,0 6px 20px #20c99766,inset 0 1px 0 #ffffff4d;transform:translateY(-3px)}.dark-variations{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:20px 0}.variation-card{background:#fff;border:2px solid #e9ecef;border-radius:10px;box-shadow:0 4px 12px #0000001a;padding:20px}.variation-card h5{color:#4a90e2;font-size:16px;margin-top:0}.dosage-effect{background:linear-gradient(135deg,#ffecd2,#fcb69f);border-radius:10px;margin:20px 0;padding:20px}.sex-linked-inheritance{margin:25px 0}.sex-inheritance-explanation{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:20px}.female-inheritance,.male-inheritance{background:#f8f9fa;border-radius:10px;padding:20px}.male-inheritance{border-left:5px solid #4a90e2}.female-inheritance{border-left:5px solid #ff69b4}.female-inheritance h5,.male-inheritance h5{font-size:16px;margin-top:0;text-align:center}.breeding-patterns{margin:25px 0}.breeding-examples{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:20px}.breeding-case{background:#fff;border:2px solid #e9ecef;border-radius:10px;box-shadow:0 4px 12px #0000001a;padding:20px}.breeding-case h5{color:#4a90e2;font-size:16px;margin-top:0}.breeding-case p{margin:8px 0}.visual-effects{margin:25px 0}.effects-description{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:20px}.effect-item{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;color:#fff;padding:20px}.effect-item h5{font-size:16px;margin-top:0}.color-variations{margin:25px 0}.color-gradient{display:flex;flex-direction:column;gap:10px;margin-top:20px}.gradient-item{align-items:center;background:linear-gradient(90deg,#ffecd2,#fcb69f);border-radius:25px;box-shadow:0 2px 8px #0000001a;display:flex;justify-content:space-between;padding:12px 20px}.gradient-level{color:#8b4b8a;font-weight:600}.gradient-desc{color:#2c3e50}.naming-clarification{margin:25px 0}.naming-info{background:#fff3cd;border:1px solid #ffeaa7;border-radius:10px;padding:20px}.naming-info p{margin:8px 0}.naming-info strong{color:#856404}.identification-tips{margin:25px 0}.identification-guide{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:20px}.tip-item{background:#e8f4f8;border-left:5px solid #4a90e2;border-radius:10px;padding:20px}.tip-item h5{color:#2c3e50;margin-top:0}.tip-item p{font-size:14px;margin:5px 0}.health-considerations{background:#ffeaa7;border-left:5px solid #fdcb6e;border-radius:10px;margin:25px 0;padding:20px}.health-considerations h4{color:#2d3436;margin-top:0}.molecular-basis,.molecular-info{background:#e8f5e8;border-left:5px solid #00b894;border-radius:10px;margin:25px 0;padding:20px}.molecular-basis h4,.molecular-info h4{color:#00796b;margin-top:0}.historical-context{background:#f3e5f5;border-left:5px solid #9c27b0;border-radius:10px;margin:25px 0;padding:20px}.historical-context h4{color:#7b1fa2;margin-top:0}.breeding-advantages,.breeding-considerations,.breeding-tips{background:#e3f2fd;border-left:5px solid #2196f3;border-radius:10px;margin:25px 0;padding:20px}.breeding-advantages h4,.breeding-considerations h4,.breeding-tips h4{color:#1976d2;margin-top:0}.combination-effects{background:#f0f4c3;border-left:5px solid #8bc34a;border-radius:10px;margin:25px 0;padding:20px}.combination-effects h4{color:#689f38;margin-top:0}@media (max-width:768px){.gene-introduction{padding:15px}.gene-nav{gap:10px;grid-template-columns:repeat(2,1fr)}.gene-nav-btn{min-height:70px;padding:12px 8px}.gene-icon{font-size:20px;margin-bottom:5px}.gene-title{font-size:12px}.gene-content-body{padding:20px}.gene-content-header h2{font-size:24px;letter-spacing:1px}.gene-detail-header h2{font-size:22px}.gene-overview h4{font-size:18px}.gene-overview p,.gene-overview ul li{font-size:15px;line-height:1.5}.gene-categories .category h4{font-size:16px}.gene-categories .category ul li{font-size:14px}.inheritance-info h4{font-size:16px}.inheritance-info p{font-size:14px;line-height:1.5}.color-formation h4{font-size:16px}.color-formation p{font-size:14px;line-height:1.5}.color-formation ul li{font-size:14px}.color-formula{border-radius:15px;box-shadow:0 6px 20px #28a74559,0 3px 12px #20c99740;font-size:15px;margin:15px 0;padding:18px 20px}.gene-mechanism h4{font-size:16px}.gene-mechanism p{font-size:14px;line-height:1.5}.phenotype-info h4{font-size:16px}.phenotype-list li{font-size:14px;line-height:1.5}.process-step .step-text{font-size:14px}.gene-header{align-items:flex-start;flex-direction:column}.gene-header h3{font-size:20px}.mechanism-details{flex-direction:column}.process-step{min-width:auto}.breeding-examples,.dark-variations,.effects-description,.gene-categories,.identification-guide,.sex-inheritance-explanation{grid-template-columns:1fr}.gradient-item{flex-direction:column;gap:5px;text-align:center}.inheritance-pattern{gap:15px;grid-template-columns:1fr}.genetic-table td,.genetic-table th{font-size:11px;padding:6px 3px}.genetic-table th{font-size:9px}.inheritance-pattern .genetic-table td,.inheritance-pattern .genetic-table th{font-size:10px;padding:4px 2px}.female-inheritance,.male-inheritance{min-width:0;overflow-x:auto}.gene-nav-horizontal{flex-wrap:nowrap;gap:4px;justify-content:center}.gene-nav-horizontal .genotype-btn{flex:1 1;height:60px;max-width:72px;min-width:0;padding:4px 2px;width:auto}.gene-nav-horizontal .gene-name-cn{font-size:11px;font-weight:500;max-width:68px}.gene-nav-horizontal .gene-name-en{font-size:8px;max-width:68px}.study-guide-separator{margin:30px 0 20px;padding:15px}.study-guide-separator h3{font-size:20px}.study-guide-separator p{font-size:14px}}@media (max-width:480px){.gene-nav{grid-template-columns:1fr}.gene-nav-btn{min-height:60px}.gene-content-header{padding:20px 15px}.gene-content-body{padding:15px}.gene-content-header h2{font-size:22px;letter-spacing:.5px}.gene-detail-header h2{font-size:20px}.gene-overview h4{font-size:16px}.gene-overview p,.gene-overview ul li{font-size:14px;line-height:1.4}.gene-categories .category h4{font-size:15px}.gene-categories .category ul li{font-size:13px}.inheritance-info h4{font-size:15px}.inheritance-info p{font-size:13px;line-height:1.4}.color-formation h4{font-size:15px}.color-formation p{font-size:13px;line-height:1.4}.color-formation ul li{font-size:13px}.color-formula{border-radius:12px;box-shadow:0 5px 18px #28a7454d,0 2px 10px #20c99733;font-size:14px;margin:12px 0;padding:15px 18px}.gene-mechanism h4{font-size:15px}.gene-mechanism p{font-size:13px;line-height:1.4}.phenotype-info h4{font-size:15px}.phenotype-list li{font-size:13px;line-height:1.4}.process-step .step-text{font-size:13px}.gene-nav-horizontal{flex-wrap:nowrap;gap:2px}.gene-nav-horizontal .genotype-btn{flex:1 1;height:55px;max-width:64px;min-width:0;padding:3px 1px;width:auto}.gene-nav-horizontal .gene-name-cn{font-size:10px;font-weight:500;max-width:60px}.gene-nav-horizontal .gene-name-en{font-size:7px;max-width:60px}.study-guide-separator{margin:25px 0 15px;padding:12px}.study-guide-separator h3{font-size:18px}.study-guide-separator p{font-size:13px}}.searchable-select{position:relative;width:100%}.search-input{background:#fff;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;outline:none;padding:12px 40px 12px 12px;text-align:center;transition:border-color .3s ease;width:100%}.search-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.search-input::placeholder{color:#999}.clear-button{align-items:center;background:none;border:none;color:#999;cursor:pointer;display:flex;font-size:18px;height:20px;justify-content:center;position:absolute;right:30px;transition:color .3s ease;width:20px}.clear-button:hover{color:#666}.dropdown-arrow{align-items:center;color:#666;cursor:pointer;display:flex;font-size:12px;height:20px;justify-content:center;pointer-events:auto;position:absolute;right:12px;transition:transform .3s ease;width:20px}.dropdown-arrow.open{transform:rotate(180deg)}.options-container{background:#fff;border:2px solid #667eea;border-radius:0 0 8px 8px;border-top:none;box-shadow:0 4px 12px #00000026;left:0;max-height:200px;overflow-y:auto;position:absolute;right:0;top:100%;width:100%;z-index:9999}.option{border-bottom:1px solid #f0f0f0;cursor:pointer;overflow:visible;padding:10px 12px;text-overflow:clip;transition:background-color .2s ease;white-space:nowrap;word-break:keep-all}.option:last-child{border-bottom:none}.option.highlighted,.option:hover{background-color:#f8f9ff}.option.selected{background-color:#667eea;color:#fff}.option.selected.highlighted,.option.selected:hover{background-color:#5a6fd8}.no-options{color:#999;font-style:italic;padding:12px;text-align:center}.options-container::-webkit-scrollbar{width:6px}.options-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.options-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.options-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width:768px){.clear-button,.dropdown-arrow,.search-input,.searchable-select *,.searchable-select :after,.searchable-select :before{transform:none!important;will-change:auto!important}.clear-button,.dropdown-arrow,.search-input{font-size:16px!important;touch-action:manipulation!important}.option{touch-action:manipulation!important;will-change:background-color!important}.searchable-select{position:relative;transform:none!important;width:100%;will-change:auto!important}.search-input{-webkit-tap-highlight-color:rgba(102,126,234,.1);background:#fff;border:2px solid #e0e0e0;border-radius:16px;box-sizing:border-box;font-size:16px;min-height:56px;padding:16px 50px 16px 16px;text-align:center;transition:border-color .3s ease;width:100%}.search-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.clear-button{font-size:20px;min-height:48px;min-width:48px;right:40px}.clear-button,.dropdown-arrow{-webkit-tap-highlight-color:transparent}.dropdown-arrow{font-size:14px;min-height:36px;min-width:36px;right:12px}.options-container{-webkit-overflow-scrolling:touch;border:2px solid #667eea;border-radius:16px;border-top:none;box-shadow:0 8px 24px #00000026;isolation:auto!important;max-height:200px;overflow-y:auto;position:absolute!important;transform:none!important;will-change:auto!important;z-index:999999!important}.option{-webkit-tap-highlight-color:rgba(102,126,234,.1);font-size:16px;overflow:visible;padding:16px 20px;text-overflow:clip;white-space:nowrap;word-break:keep-all}.no-options,.option{align-items:center;display:flex;min-height:52px}.no-options{font-size:14px;justify-content:center;padding:16px}}@media (min-width:769px){.options-container{position:absolute;width:100%}}.breed-guide{margin:0 auto;max-width:1200px;min-width:1020px;padding:20px}.guide-header{align-items:center;background:linear-gradient(135deg,#28a745,#20c997 50%,#17a2b8);border:3px solid #fff3;border-radius:15px;box-shadow:0 8px 25px #28a74566,0 4px 15px #20c9974d,inset 0 1px 0 #fff3;color:#fff;display:flex;flex-direction:column;justify-content:center;margin-bottom:30px;overflow:hidden;padding:25px 30px}.guide-header .page-title{-webkit-text-fill-color:#fff!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:#fff!important;font-size:32px;font-weight:600;margin:0;text-align:center}.search-controls{align-items:center;display:flex;justify-content:center;margin-bottom:20px}.search-input-container{align-items:center;display:flex;gap:10px;margin:0 auto;max-width:600px;position:relative}.search-input-container .searchable-select{flex:1 1}.search-button{background:linear-gradient(135deg,#42a5f5,#1e88e5);border:none;border-radius:8px;box-shadow:0 2px 8px #42a5f54d;color:#fff;cursor:pointer;font-size:16px;font-weight:600;margin-left:10px;min-width:80px;padding:12px 20px;transition:all .3s ease}.search-button:hover{background:linear-gradient(135deg,#1e88e5,#1565c0);box-shadow:0 4px 12px #42a5f566;transform:translateY(-2px)}.breed-guide-select .search-input{border:2px solid #ddd;font-size:16px;padding:12px 40px 12px 12px;transition:border-color .3s ease}.breed-guide-select .search-input:focus{border-color:#4caf50;box-shadow:0 0 0 3px #4caf501a}.breed-guide-select .options-container{border-color:#4caf50;max-height:250px}.breed-guide-select .option.highlighted,.breed-guide-select .option:hover{background-color:#f1f8e9}.breed-guide-select .option.selected{background-color:#4caf50;color:#fff}.breed-guide-select .option.selected.highlighted,.breed-guide-select .option.selected:hover{background-color:#45a049}.phenotypes-container{background:#f1f8e9;border:2px solid #c8e6c8;border-radius:12px;height:600px;margin-bottom:20px;min-width:980px;overflow-y:auto;padding:20px;position:relative}.phenotypes-container::-webkit-scrollbar{width:8px}.phenotypes-container::-webkit-scrollbar-track{background:#e8f0e8;border-radius:4px}.phenotypes-container::-webkit-scrollbar-thumb{background:#4caf50;border-radius:4px}.phenotypes-container::-webkit-scrollbar-thumb:hover{background:#45a049}.phenotypes-container .phenotype-row{display:flex;flex-direction:column;height:auto;justify-content:flex-start;margin-bottom:20px}.phenotypes-container .phenotype-row:last-child{margin-bottom:0;padding-bottom:0}.phenotype-title{display:flex;justify-content:center;margin-bottom:8px;padding:15px 0;text-align:center;width:100%}.phenotype-name-container{display:inline-block;padding:10px 20px}.phenotype-name{display:inline-block;font-size:40px;font-weight:700;letter-spacing:.5px;margin:0}.shiny-text,.shiny-text-green{background:linear-gradient(120deg,#2e7d32 40%,#66bb6a 50%,#2e7d32 60%);-webkit-background-clip:text;background-clip:text;background-size:200% 100%;color:#2e7d32}.shiny-text,.shiny-text-blue,.shiny-text-green{animation:shine 3s linear infinite;display:inline-block}.shiny-text-blue{background:linear-gradient(120deg,#1976d2 40%,#42a5f5 50%,#1976d2 60%);-webkit-background-clip:text;background-clip:text;background-size:200% 100%;color:#1976d2}.shiny-text-yellow{background:linear-gradient(120deg,#fff176 30%,#ffe600 50%,#ffd600 70%);-webkit-background-clip:text;background-clip:text;background-size:200% 100%;color:#ffe600}.shiny-text-purple,.shiny-text-yellow{animation:shine 3s linear infinite;display:inline-block}.shiny-text-purple{background:linear-gradient(120deg,#8e24aa 40%,#ce93d8 50%,#8e24aa 60%);-webkit-background-clip:text;background-clip:text;background-size:200% 100%;color:#8e24aa}.shiny-text-black{background:linear-gradient(120deg,#222 40%,#888 50%,#222 60%);-webkit-background-clip:text;background-clip:text;background-size:200% 100%;color:#222}.shiny-text-black,.shiny-text-gray{animation:shine 3s linear infinite;display:inline-block}.shiny-text-gray{background:linear-gradient(120deg,#757575 40%,#bdbdbd 50%,#757575 60%);-webkit-background-clip:text;background-clip:text;background-size:200% 100%;color:#757575}.shiny-text-white{color:#888;display:inline-block}.shiny-text-rainbow{background:linear-gradient(120deg,#ff5252,#ffeb3b 20%,#4caf50 40%,#2196f3 60%,#9c27b0 80%,#ff5252);-webkit-background-clip:text;background-clip:text;background-size:400% 100%;color:#ff9800}.shiny-text-cyan,.shiny-text-rainbow{animation:shine 3s linear infinite;display:inline-block}.shiny-text-cyan{background:linear-gradient(120deg,#00bcd4 40%,#1de9b6 60%,#00bcd4 80%);-webkit-background-clip:text;background-clip:text;background-size:200% 100%;color:#00bcd4}.shiny-text-gold-green{background:linear-gradient(120deg,#bf9000 40%,gold 50%,#4caf50 60%,#bf9000 80%);-webkit-background-clip:text;background-clip:text;background-size:200% 100%;color:#bf9000}.shiny-text-blue-white,.shiny-text-gold-green{animation:shine 3s linear infinite;display:inline-block}.shiny-text-blue-white{background:linear-gradient(120deg,#87ceeb 40%,silver 50%,#87ceeb 60%);-webkit-background-clip:text;background-clip:text;background-size:200% 100%;color:#87ceeb}@keyframes shine{0%{background-position:100% 0}to{background-position:0 0}}.shiny-text.disabled{animation:none}.phenotype-images-row{display:flex;flex-wrap:nowrap;gap:10px;justify-content:center}.image-top-text{margin-bottom:12px;text-align:center}.image-bottom-text{margin-top:12px;text-align:center}.image-credit{align-items:center;color:#666;display:flex;flex-direction:column;font-size:14px;gap:2px;line-height:1.4}.image-credit-id{max-width:100%;overflow-wrap:break-word;white-space:normal;word-break:break-all}.image-title{color:#333;font-size:20px;font-weight:600;line-height:1.2;margin:0}.image-handle{color:#666;font-size:16px;font-weight:400;margin:0}.image-group{align-items:stretch;box-sizing:border-box;display:flex;flex-direction:column;padding:8px;text-align:center;transition:all .3s ease}.image-group .image-placeholder,.image-group img.phenotype-image{display:block;flex-grow:0;flex-shrink:0;height:280px;margin:0 auto 12px;object-fit:cover;width:210px}.image-group .image-bottom-text{flex-shrink:0;margin-top:16px;text-align:center}.image-placeholder{align-items:center;background:linear-gradient(45deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:8px;display:flex;flex-direction:column;height:280px;justify-content:center;margin-bottom:12px;overflow:hidden;position:relative;transition:all .3s ease;width:210px}.image-placeholder:hover{background:linear-gradient(45deg,#e9ecef,#dee2e6);border-color:#adb5bd}.placeholder-center{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.placeholder-text{color:#6c757d;font-size:12px;font-weight:500;margin-bottom:5px;text-align:center}.placeholder-icon{font-size:24px;opacity:.6;text-align:center}.image-group:hover{transform:translateY(-2px)}.guide-footer{border-top:1px solid #e9ecef;margin-top:40px;padding:20px;text-align:center}.phenotype-count{color:#6c757d;font-size:16px;font-weight:500;margin:0}@media (max-width:768px){.breed-guide{min-width:auto;padding:15px}.guide-header{margin-bottom:20px;padding:20px}.guide-header .page-title{font-size:28px}.search-controls{margin-bottom:15px}.search-input-container{gap:8px;max-width:none}.search-button{background:linear-gradient(135deg,#42a5f5,#1e88e5);box-shadow:0 2px 6px #42a5f54d;font-size:14px;padding:10px 12px}.search-button:hover{background:linear-gradient(135deg,#1e88e5,#1565c0);box-shadow:0 3px 8px #42a5f566}.phenotypes-container{height:500px;min-width:auto;overflow-x:hidden;overflow-y:auto;padding:15px;position:relative}.phenotypes-container .phenotype-row{background:#0000!important;border:none!important;border-radius:0!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;height:auto!important;justify-content:flex-start!important;margin:0 0 30px!important;padding:0 0 20px!important}.phenotypes-container .phenotype-row:last-child{margin-bottom:0!important}.phenotype-title{display:flex!important;justify-content:center!important;margin:0 0 6px!important;padding:15px 0;text-align:center!important;width:100%!important}.phenotype-name-container{background:#0000!important;padding:8px 15px}.phenotype-name{font-size:40px}.phenotype-images-row{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:15px;justify-content:center;margin:0 0 10px!important;padding:10px 0;width:100%!important}.phenotype-divider{border-top:2px solid #667eea4d!important;display:block!important;height:0!important;margin:20px 0!important;padding:0!important;width:100%!important}.image-placeholder{background:#0000!important;border:2px dashed #667eea4d!important;margin:6px 0!important}.image-group img.phenotype-image,.image-placeholder{flex-grow:0!important;flex-shrink:0!important;height:280px!important;max-height:280px!important;max-width:210px!important;min-height:280px!important;min-width:210px!important;width:210px!important}.image-group img.phenotype-image{object-fit:cover!important}.image-group{background:#0000!important;display:flex!important;flex-direction:column!important;flex-shrink:0!important;margin:0!important;padding:8px}.image-top-text{margin:0 0 10px!important}.image-bottom-text{margin:10px 0 0!important}.image-title{font-size:18px}.image-handle{font-size:14px}.placeholder-icon{font-size:20px}}@media (max-width:480px){.guide-header{margin-bottom:15px;padding:15px}.guide-header .page-title{font-size:24px}.phenotypes-container{height:400px;min-width:auto;overflow-x:hidden;overflow-y:auto;padding:10px;position:relative}.phenotypes-container .phenotype-row{background:#0000!important;border:none!important;border-radius:0!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;height:auto!important;justify-content:flex-start!important;margin:0 0 25px!important;padding:0 0 15px!important}.phenotypes-container .phenotype-row:last-child{margin-bottom:0!important}.phenotype-name-container{background:#0000!important}.phenotype-images-row{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 8px!important;padding:8px 0;width:100%!important}.phenotype-divider{border-top:2px solid #667eea4d!important;display:block!important;height:0!important;margin:15px 0!important;padding:0!important;width:100%!important}.image-placeholder{background:#0000!important;border:2px dashed #667eea4d!important;margin:5px 0!important}.image-group img.phenotype-image,.image-placeholder{height:280px!important;max-height:280px!important;max-width:210px!important;min-height:280px!important;min-width:210px!important;width:210px!important}.image-group img.phenotype-image{flex-grow:0!important;flex-shrink:0!important;object-fit:cover!important}.image-group{background:#0000!important;display:flex!important;flex-direction:column!important;flex-shrink:0!important;margin:0!important;padding:6px}.image-top-text{margin:0 0 8px!important}.image-bottom-text{margin:8px 0 0!important}.image-credit{font-size:12px!important;gap:1px!important}.image-credit-id{font-size:11px!important}.image-title{font-size:16px}.image-handle{font-size:13px}.placeholder-text{font-size:11px}.placeholder-icon{font-size:18px}.phenotype-name-container{padding:8px 12px}.phenotype-name{font-size:40px}.search-input-container{flex-direction:column;gap:10px}.search-button{background:linear-gradient(135deg,#42a5f5,#1e88e5);box-shadow:0 2px 6px #42a5f54d;margin-left:0;padding:10px 16px;width:100%}.search-button:hover{background:linear-gradient(135deg,#1e88e5,#1565c0);box-shadow:0 3px 8px #42a5f566}}.image-group,.image-placeholder,.phenotypes-container{transition:all .3s ease!important}.login-modal-overlay{align-items:center;background:#0000004d;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:4000}.login-modal{animation:modalFadeIn .3s;background:#fff;border-radius:18px;box-shadow:0 8px 40px #667eea2e;max-height:90vh;max-width:95vw;overflow:auto;position:relative;width:400px}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.login-modal-header{align-items:center;padding:30px 30px 10px}.login-modal-header,.login-mode-tabs{display:flex;justify-content:center;position:relative}.login-mode-tabs{background:#667eea0d;border-radius:15px;flex:none;margin-bottom:25px;padding:6px}.mode-tab{align-items:center;background:none;border:none;border-radius:12px;color:#666;cursor:pointer;display:flex;flex:1 1;font-weight:500;gap:8px;justify-content:center;padding:12px 20px;position:relative;transition:all .3s ease}.mode-tab.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 15px #667eea4d;color:#fff;transform:translateY(-1px)}.mode-tab:hover:not(.active){background:#667eea1a;color:#667eea}.close-btn{color:#888;margin-left:10px;position:absolute;right:20px;top:10px}.login-modal-body{padding:30px}.login-message{animation:messageSlideDown .3s ease-out;border-radius:8px;font-size:14px;font-weight:500;margin-bottom:16px;padding:12px 16px;text-align:center}@keyframes messageSlideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.login-message.success{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border:1px solid #10b981;color:#065f46}.login-message.error{background:linear-gradient(135deg,#fee2e2,#fecaca);border:1px solid #ef4444;color:#991b1b}.login-message.info{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border:1px solid #3b82f6;color:#1e40af}.wechat-login-form{animation:formSlideIn .3s ease-out;text-align:center}@keyframes formSlideIn{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.qrcode-container{display:flex;justify-content:center;margin-bottom:20px}.qrcode-img{border-radius:15px;height:200px;transition:all .3s ease;width:200px}.qrcode-loading{align-items:center;border:2px dashed #667eea4d;border-radius:15px;color:#999;display:flex;flex-direction:column;height:200px;justify-content:center;width:200px}.loading-spinner{animation:spin 1s linear infinite;border:3px solid #667eea4d;border-radius:50%;border-top-color:#667eea;height:40px;margin-bottom:10px;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.wechat-tips{margin:20px 0}.wechat-tips p{color:#666;font-size:14px;margin:8px 0}.account-login-form{align-items:center;animation:formSlideIn .3s ease-out;display:flex;flex-direction:column}.account-login-form .login-btn{align-self:center}.input-group{margin-bottom:20px}.input-group label{color:#333;display:block;font-size:14px;font-weight:500;margin-bottom:8px}.input-group input{background:#667eea05;border:2px solid #667eea33;border-radius:12px;box-sizing:border-box;font-size:16px;padding:14px 16px;transition:all .3s ease;width:100%}.input-group input:focus{background:#fff;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.input-group input::placeholder{color:#999}.login-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;box-shadow:0 2px 8px #667eea14;color:#fff;cursor:pointer;font-size:14px;font-weight:600;margin-top:10px;min-width:80px;padding:10px 20px;transition:all .3s ease;width:auto}.login-btn:hover:not(:disabled){box-shadow:0 8px 25px #667eea66;transform:translateY(-2px)}.login-btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.profile-modal-overlay{align-items:center;background:#0000004d;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:4000}.profile-modal{animation:modalFadeIn .3s;background:#fff;border-radius:18px;box-shadow:0 8px 40px #667eea2e;max-height:calc(100vh - 40px);max-width:calc(100vw - 40px);overflow:auto;position:relative;width:400px}.profile-modal-header{align-items:center;display:flex;justify-content:center;padding:30px 30px 10px;position:relative}.profile-modal-body{padding:30px}.profile-info-row{font-size:16px;margin-bottom:18px}.profile-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;box-shadow:0 2px 8px #667eea14;color:#fff;cursor:pointer;font-size:15px;font-weight:600;margin-top:10px;padding:10px 22px;transition:all .3s ease}.profile-btn:disabled{cursor:not-allowed;opacity:.6}.profile-btn.unbind{background:#f44336;background:linear-gradient(135deg,#f44336,#ff9800)}.login-center-btn{box-sizing:border-box;display:block;margin:0 auto 18px;max-width:none!important;width:100%!important}@media (max-width:768px){.login-modal-overlay{align-items:center;justify-content:center;padding:15px}.login-modal{display:flex;flex-direction:column;margin:0;max-height:calc(100vh - 30px);max-width:450px;width:100%}.login-modal-header{padding:20px 25px 15px}.login-modal-header h3{font-size:20px}.login-modal-body{display:flex;flex:1 1;flex-direction:column;gap:10px;justify-content:center;padding:25px}.mode-tab{font-size:14px;padding:10px 15px}.input-group input{font-size:16px;padding:12px 14px}.qrcode-img,.qrcode-loading{height:180px;width:180px}.profile-btn{border-radius:14px!important;font-size:16px!important;font-weight:700!important;letter-spacing:.8px!important;margin-bottom:16px!important;min-height:48px!important;padding:12px 0!important}.login-btn{border-radius:12px;font-size:15px;font-weight:600;min-height:44px;min-width:80px;padding:10px 20px}.login-center-btn{border-radius:18px!important;font-size:1.55em!important;font-weight:800!important;letter-spacing:2px!important;line-height:1.3!important;margin:0 auto 20px!important;min-height:60px!important}}@media (max-width:480px){.login-modal-overlay{align-items:center;justify-content:center;padding:20px}.login-modal{border-radius:16px;display:flex;flex-direction:column;margin:0;max-height:calc(100vh - 40px);max-width:100%;width:100%}.login-modal-header{padding:24px 20px 16px}.login-modal-header h3{font-size:18px;margin:0}.login-modal-body{display:flex;flex:1 1;flex-direction:column;gap:8px;justify-content:center;padding:20px}.qrcode-img,.qrcode-loading{height:160px;width:160px}.mode-tab{font-size:13px;padding:8px 12px}.input-group input{font-size:16px;padding:12px 14px}.profile-btn{border-radius:12px!important;font-size:15px!important;font-weight:700!important;letter-spacing:.6px!important;margin-bottom:14px!important;min-height:44px!important;padding:10px 0!important}.login-btn{border-radius:10px;font-size:14px;font-weight:600;min-height:40px;min-width:70px;padding:8px 16px}.profile-modal-overlay{padding:15px}.profile-modal{max-height:calc(100vh - 30px);max-width:calc(100vw - 30px);width:100%}.profile-modal-header{padding:24px 20px 16px}.profile-modal-header h2{font-size:18px;margin:0}.profile-modal-body{padding:20px}.login-center-btn{border-radius:16px!important;font-size:1.35em!important;font-weight:800!important;letter-spacing:2px!important;line-height:1.3!important;margin:0 auto 16px!important;min-height:54px!important}}.intro-modal-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10000}.intro-modal-simple{animation:modalSlideIn .3s ease-out;background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;max-height:90vh;max-width:90vw;overflow:hidden;width:600px}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.intro-modal-header-simple{align-items:center;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;padding:20px 24px}.intro-modal-header-simple h2{color:#1f2937;font-size:1.5em;font-weight:700;margin:0}.close-btn{align-items:center;background:none;border:none;border-radius:50%;color:#6b7280;cursor:pointer;display:flex;font-size:24px;height:32px;justify-content:center;padding:4px;transition:all .2s ease;width:32px}.close-btn:hover{background:#f3f4f6;color:#374151}.intro-modal-content-simple{flex:1 1;max-height:70vh;overflow-y:auto;padding:24px}.intro-section{margin-bottom:32px}.intro-section:last-child{margin-bottom:0}.intro-section h3{color:#1f2937;font-size:1.3em;font-weight:700;margin-bottom:16px;text-align:center}.calculator-cards{display:flex;flex-direction:column;gap:16px}.calc-card{background:#fff;border:2px solid #e5e7eb;border-radius:12px;padding:20px;transition:all .3s ease}.calc-card:hover{border-color:#3b82f6;box-shadow:0 8px 24px #3b82f626}.calc-header{align-items:center;display:flex;gap:12px;margin-bottom:12px}.calc-icon{font-size:1.5em}.calc-header h4{color:#1f2937;flex:1 1;font-size:1.2em;font-weight:700;margin:0}.point-cost{background:#d1fae5;border-radius:20px;color:#059669;font-size:.9em;font-weight:700;padding:4px 12px}.calc-card p{color:#4b5563;font-size:.95em;line-height:1.6;margin:0}.vip-service-info{background:#fef3c7;border:1px solid #f59e0b;border-radius:12px;padding:20px}.vip-service-info h4{color:#92400e;font-size:1.2em;font-weight:700;margin:0 0 12px;text-align:center}.vip-service-info p{color:#92400e;font-size:.95em;line-height:1.6;margin:8px 0;text-align:center}.recharge-steps{display:flex;flex-direction:column;gap:16px}.step-card{align-items:flex-start;background:#fff;border:1px solid #e5e7eb;border-radius:12px;display:flex;gap:16px;padding:20px;transition:all .3s ease}.step-card:hover{background:#f0f9ff;border-color:#3b82f6}.step-number{align-items:center;background:#3b82f6;border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:1.1em;font-weight:700;height:32px;justify-content:center;width:32px}.step-content{flex:1 1}.step-content h4{color:#1f2937;font-size:1.1em;font-weight:700;margin:0 0 8px}.step-content p{color:#4b5563;font-size:.95em;line-height:1.6;margin:0}.intro-title{color:#1f2937;font-size:2.2em;font-weight:800;letter-spacing:2px;line-height:1.2;margin:0 auto;text-align:center}.intro-modal-footer-simple{background:#f9fafb;border-top:1px solid #e5e7eb;padding:20px 24px;text-align:center}.start-btn{background:#3b82f6;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1.1em;font-weight:700;min-width:120px;padding:12px 32px;transition:all .3s ease}.start-btn:hover{background:#2563eb;box-shadow:0 4px 12px #3b82f64d;transform:translateY(-1px)}@media (max-width:768px){.intro-modal-simple{border-radius:16px;max-height:95vh;width:95vw}.intro-modal-content-simple{padding:20px}.intro-modal-header-simple h2{font-size:1.3em}.calc-card,.step-card,.vip-service-info{padding:16px}.calc-header{flex-wrap:wrap;gap:8px}.calc-header h4{font-size:1.1em}.step-card{flex-direction:column;gap:12px}.step-number{align-self:flex-start}}@media (max-width:480px){.intro-modal-header-simple{padding:16px 20px}.intro-modal-content-simple{padding:16px}.intro-modal-footer-simple{padding:16px 20px}.start-btn{font-size:1em;padding:10px 24px}}.intro-modal-header-simple .intro-title{color:#1f2937;font-size:2.2em!important;font-weight:800;letter-spacing:2px;line-height:1.2;margin:0 auto;text-align:center!important}@media (max-width:768px){.intro-modal-header-simple .intro-title{font-size:1.7em!important}}@media (max-width:480px){.intro-modal-header-simple .intro-title{font-size:1.3em!important}}body,html{height:100%;margin:0;padding:0}.profile-page-bg{align-items:center;background:linear-gradient(135deg,#e0fdf4,#c6f7e2);display:flex;height:100vh;justify-content:center;min-height:100vh;overflow:hidden}.profile-center-box{align-items:center;background:#ffffffb3;border-radius:32px;box-shadow:0 8px 32px #10b98114;display:flex;flex-direction:column;max-height:90vh;overflow:auto;padding:48px 32px 32px}.profile-username{color:#059669;font-size:1.5rem;font-weight:700;letter-spacing:1px;margin-top:8px}.profile-username-row{align-items:center;display:flex;justify-content:center;margin-bottom:8px;margin-top:8px;position:relative;width:100%}.profile-username-text{color:#059669;flex:1 1;font-size:1.5rem;font-weight:700;letter-spacing:1px;text-align:center}.profile-username-edit-btn{align-items:center;display:flex;position:absolute;right:0;top:50%;transform:translateY(-50%)}.profile-btn-row{display:flex;flex-direction:row;gap:16px;justify-content:center;margin-top:18px}.profile-info-row{align-items:center;display:flex;height:48px;line-height:48px;margin:8px 0;position:relative}.profile-info-label{color:#888;font-size:16px;font-weight:500;width:80px}.profile-info-value{color:#333;flex:1 1;font-size:16px}@media (max-width:768px){.profile-page-bg{align-items:center;padding:16px}.profile-center-box{border-radius:24px;margin:0 auto;max-height:calc(100vh - 32px);max-width:360px;padding:32px 24px 24px;width:100%}.profile-username-row{align-items:center;flex-direction:row;justify-content:center;margin-bottom:16px;position:relative}.profile-username-text{flex:1 1;font-size:1.4rem;margin-bottom:0;text-align:center}.profile-username-edit-btn{justify-content:flex-end;position:absolute;right:0;top:50%;transform:translateY(-50%)}.profile-btn-row{flex-direction:row;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}.profile-info-row{height:40px;line-height:40px;margin:4px 0}.profile-info-label{font-size:15px;width:70px}.profile-info-value{font-size:15px}.profile-btn{border-radius:12px!important;box-shadow:0 2px 8px #667eea26!important;flex:1 1;font-size:14px!important;font-weight:600!important;letter-spacing:.5px!important;max-width:120px;min-height:40px!important;min-width:80px;padding:10px 16px!important;transition:all .3s ease!important}.profile-btn:hover{box-shadow:0 4px 12px #667eea40!important;transform:translateY(-1px)!important}.profile-btn:active{box-shadow:0 2px 6px #667eea33!important;transform:translateY(0)!important}.profile-username-edit-btn .profile-btn{border-radius:8px!important;font-size:12px!important;max-width:none;min-height:28px!important;min-width:auto;padding:6px 12px!important}.profile-center-box>div:last-child .profile-btn{border-radius:16px!important;flex:none;font-size:16px!important;font-weight:700!important;letter-spacing:1px!important;max-width:none;min-height:48px!important;min-width:auto;padding:12px 24px!important}}@media (max-width:480px){.profile-page-bg{padding:12px}.profile-center-box{border-radius:20px;max-width:320px;padding:24px 20px 20px}.profile-username-text{font-size:1.3rem}.profile-btn-row{gap:6px;margin-top:16px}.profile-info-row{height:36px;line-height:36px;margin:3px 0}.profile-info-label{font-size:14px;width:65px}.profile-info-value{font-size:14px}.profile-btn{border-radius:10px!important;font-size:13px!important;max-width:100px;min-height:36px!important;min-width:70px;padding:8px 12px!important}.profile-btn:hover{box-shadow:0 4px 12px #667eea40!important;transform:translateY(-1px)!important}.profile-btn:active{box-shadow:0 2px 6px #667eea33!important;transform:translateY(0)!important}.profile-username-edit-btn .profile-btn{border-radius:6px!important;font-size:11px!important;max-width:none;min-height:24px!important;min-width:auto;padding:4px 10px!important}.profile-center-box>div:last-child .profile-btn{border-radius:14px!important;flex:none;font-size:14px!important;max-width:none;min-height:44px!important;min-width:auto;padding:10px 20px!important}}@media (max-width:600px){.profile-btn-row{align-items:center;flex-direction:row;flex-wrap:wrap;gap:8px;justify-content:center}}@media (max-width:768px){.vip-page-container{align-items:center!important;padding:16px!important}.vip-page-card{border-radius:18px!important;margin:0 auto!important;max-width:100%!important;padding:28px 20px 20px!important}.vip-page-title{font-size:1.6em!important;margin-bottom:14px!important}.vip-page-section{margin-bottom:18px!important}.vip-page-section-title{font-size:15px!important}.vip-page-section-content{border-radius:8px!important;font-size:15px!important;padding:8px 14px!important}.vip-page-list{font-size:15px!important;line-height:2.1!important;margin-left:14px!important}.vip-page-footer{font-size:14px!important}}@media (max-width:480px){.vip-page-container{padding:12px!important}.vip-page-card{border-radius:16px!important;padding:24px 16px 16px!important}.vip-page-title{font-size:1.4em!important;margin-bottom:12px!important}.vip-page-section{margin-bottom:16px!important}.vip-page-section-title{font-size:14px!important}.vip-page-section-content{border-radius:6px!important;font-size:14px!important;padding:6px 12px!important}.vip-page-list{font-size:14px!important;line-height:2!important;margin-left:12px!important}.vip-page-footer{font-size:13px!important}}
/*# sourceMappingURL=main.91797dea.css.map*/