.form-group{margin-bottom:var(--spacing-md);width:100%}label{display:block;font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-xs);color:var(--color-text-secondary)}input,select,textarea{width:100%;padding:var(--spacing-sm);font-size:1rem;font-family:var(--font-family);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);background-color:var(--color-panel);transition:all var(--transition-fast);touch-action:manipulation;color:var(--color-text-primary)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-accent)}textarea{min-height:100px;resize:vertical}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-lg);font-size:1rem;font-weight:var(--font-weight-medium);text-align:center;border:none;border-radius:var(--border-radius-sm);cursor:pointer;transition:all var(--transition-fast);touch-action:manipulation;min-height:44px;gap:var(--spacing-xs);white-space:nowrap}@media (hover: hover){.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(1px)}}.btn-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff}.btn-primary:hover{background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary-dark) 100%);box-shadow:0 2px 4px #0000001a}.btn-secondary{background-color:var(--color-secondary-light);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:var(--color-secondary);color:var(--color-text-light)}.btn-danger{background-color:var(--color-error);color:#fff}.btn-danger:hover{background-color:#e53e3e}.button-group{display:flex;gap:var(--spacing-md);flex-wrap:wrap;width:100%;justify-content:flex-start}.timeline{position:relative;padding:var(--spacing-lg) 0;min-height:200px;width:100%;display:flex;flex-direction:column;gap:var(--spacing-md)}.timeline-event{position:relative;padding:var(--spacing-md);margin-bottom:var(--spacing-md);background-color:var(--color-panel);border-radius:var(--border-radius-md);border-left:4px solid var(--color-primary);box-shadow:var(--shadow-sm);width:100%}.timeline-event.future{border-left-color:var(--color-secondary);background-color:var(--color-accent);opacity:.9}.timeline-event h3{color:var(--color-primary-dark);margin-bottom:var(--spacing-xs);font-size:clamp(1.1rem,1.5vw + .5rem,1.25rem)}.timeline-event.future h3{color:var(--color-secondary-dark)}.timeline-date{font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-xs)}.timeline-notes{color:var(--color-text-secondary);font-style:italic}.stage-indicator{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;gap:var(--spacing-sm)}.stage-name{font-size:clamp(1.25rem,2vw + .5rem,1.5rem);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-xs);color:var(--color-primary-dark)}.stage-dates{font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-sm)}.stage-description{color:var(--color-text-secondary);max-width:600px;margin-inline:auto}.prediction-box{text-align:center;padding:var(--spacing-md);background-color:var(--color-accent);border-radius:var(--border-radius-md);width:100%}.prediction-date{font-size:clamp(1.25rem,2vw + .5rem,1.5rem);font-weight:var(--font-weight-bold);color:var(--color-primary-dark);margin-bottom:var(--spacing-xs)}.days-away{font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.notification{position:fixed;bottom:var(--spacing-lg);left:50%;transform:translate(-50%);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius-md);background-color:var(--color-panel);box-shadow:var(--shadow-lg);z-index:1000;transition:opacity var(--transition-normal);max-width:min(calc(100% - 2rem),400px);text-align:center}.notification.success{background-color:var(--color-success);color:var(--color-text-light)}.notification.error{background-color:var(--color-error);color:var(--color-text-light)}.notification.info{background-color:var(--color-secondary);color:var(--color-text-primary)}.content-section{max-width:800px;margin:0 auto}.guide-section{margin-bottom:var(--spacing-xl)}.guide-section h3{color:var(--color-primary-dark);margin-bottom:var(--spacing-md);font-size:1.25rem}.guide-section ul{list-style-type:none;padding-left:var(--spacing-lg)}.guide-section li{position:relative;margin-bottom:var(--spacing-sm)}.guide-section li:before{content:"•";color:var(--color-primary);position:absolute;left:-1.2em}.contact-form{max-width:600px;margin:0 auto}#contact-form{display:flex;flex-direction:column;gap:var(--spacing-md)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{box-shadow:0 0 #ff8fb166}70%{box-shadow:0 0 0 10px #ff8fb100}to{box-shadow:0 0 #ff8fb100}}.fade-in{animation:fadeIn .5s ease forwards}.pulse{animation:pulse 2s infinite}.cycle-stage-progress{display:flex;justify-content:space-between;width:100%;margin:var(--spacing-md) 0;position:relative}.cycle-stage-progress:before{content:"";position:absolute;top:50%;left:0;width:100%;height:4px;background-color:var(--color-border);transform:translateY(-50%);z-index:1}.cycle-stage-progress-bar{position:absolute;top:50%;left:0;height:4px;background-color:var(--color-primary);transform:translateY(-50%);z-index:2;transition:width var(--transition-normal)}.cycle-stage{width:16px;height:16px;border-radius:50%;background-color:var(--color-panel);border:2px solid var(--color-border);position:relative;z-index:3;transition:all var(--transition-normal)}.cycle-stage.active{background-color:var(--color-primary);border-color:var(--color-primary);transform:scale(1.3)}.cycle-stage.completed{background-color:var(--color-primary-light);border-color:var(--color-primary)}.loading{display:inline-block;width:30px;height:30px;border:3px solid rgba(255,143,177,.3);border-radius:50%;border-top-color:var(--color-primary);animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}:root{--color-primary: #2C7A7B;--color-primary-light: #4FD1C5;--color-primary-dark: #285E61;--color-secondary: #4A5568;--color-secondary-light: #A0AEC0;--color-secondary-dark: #2D3748;--color-accent: #E6FFFA;--color-success: #48BB78;--color-warning: #ECC94B;--color-error: #F56565;--color-text-primary: #1A202C;--color-text-secondary: #4A5568;--color-text-tertiary: #718096;--color-text-light: #FFFFFF;--color-background: #F7FAFC;--color-panel: #FFFFFF;--color-border: #E2E8F0;--spacing-xs: clamp(4px, .5vw, 8px);--spacing-sm: clamp(8px, 1vw, 12px);--spacing-md: clamp(16px, 2vw, 24px);--spacing-lg: clamp(24px, 3vw, 32px);--spacing-xl: clamp(32px, 4vw, 48px);--spacing-xxl: clamp(48px, 6vw, 64px);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-bold: 600;--border-radius-sm: 6px;--border-radius-md: 8px;--border-radius-lg: 12px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .05), 0 4px 6px rgba(0, 0, 0, .05);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{font-size:clamp(14px,1vw + 8px,16px)}body{font-family:var(--font-family);color:var(--color-text-primary);background-color:var(--color-background);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-height:100vh}.container{width:min(100% - 2rem,1200px);margin-inline:auto;padding-inline:var(--spacing-md)}.app-header{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--color-text-light);padding:var(--spacing-lg) 0;box-shadow:var(--shadow-md);width:100%;position:relative;z-index:100}.header-content{padding:var(--spacing-md) 0;position:relative}.main-nav{display:flex;flex-direction:column;align-items:center;width:100%;position:relative;gap:var(--spacing-md)}.logo-container{display:flex;align-items:center;gap:var(--spacing-md);list-style:none}#app-logo{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--color-text-light);flex-shrink:0}.title-container{text-align:center;display:flex;flex-direction:column;gap:var(--spacing-xs)}h1{font-size:clamp(1.5rem,3vw + .5rem,2rem);margin-bottom:0;line-height:1.2;font-weight:var(--font-weight-bold)}.subtitle{font-size:clamp(1rem,1.5vw + .2rem,1.2rem);opacity:.9;line-height:1.4;margin:0}.title-link{color:var(--color-text-light);text-decoration:none;transition:opacity var(--transition-fast)}.title-link:hover{opacity:.9;color:var(--color-text-light)}.nav-links{display:flex;gap:var(--spacing-md);align-items:center;justify-content:center;flex-wrap:wrap;width:100%;padding:var(--spacing-sm) 0;list-style:none;margin:0}.nav-link{color:var(--color-text-light);text-decoration:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);transition:all var(--transition-fast);font-weight:var(--font-weight-medium);font-size:clamp(.9rem,1.2vw + .2rem,1rem)}.nav-link:hover{background-color:#ffffff1a;color:var(--color-text-light)}.nav-link.active{background-color:#fff3}#app{min-height:100vh;display:flex;flex-direction:column}main{flex:1;padding:var(--spacing-lg) 0;width:100%;display:flex;flex-direction:column;gap:var(--spacing-xl);position:relative;z-index:1}h2{font-size:clamp(1.25rem,2vw + .5rem,1.5rem);margin-bottom:var(--spacing-md);color:var(--color-primary-dark);font-weight:var(--font-weight-bold);line-height:1.2}h3,h4,h5,h6{font-weight:var(--font-weight-bold);line-height:1.2}p{margin-bottom:var(--spacing-md)}a{color:var(--color-primary-dark);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary)}.panel{background-color:var(--color-panel);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md);padding:clamp(var(--spacing-md),4vw,var(--spacing-lg));margin-bottom:var(--spacing-lg);transition:transform var(--transition-normal),box-shadow var(--transition-normal);width:100%;height:-moz-fit-content;height:fit-content;overflow:hidden;border:1px solid var(--color-border)}.highlight-panel{border-left:4px solid var(--color-primary)}.button-group{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);width:100%}.button-group .btn,.button-group label.btn{width:100%;min-width:120px;justify-content:center;height:44px}.dog-info-container,.cycle-data-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--spacing-lg);width:100%;align-items:start}footer{background-color:var(--color-secondary-dark);color:var(--color-text-light);padding:var(--spacing-lg) 0;margin-top:auto;width:100%;position:relative;z-index:1}.footer-link{color:var(--color-text-light);text-decoration:none;transition:opacity var(--transition-fast)}.footer-link:hover{opacity:.9;color:var(--color-text-light)}footer .container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);text-align:center}.footer-links{display:flex;gap:var(--spacing-md);align-items:center;flex-wrap:wrap;justify-content:center}.footer-links a{color:var(--color-text-light);opacity:.9;text-decoration:none;transition:opacity var(--transition-fast)}.footer-links a:hover{opacity:1;color:var(--color-text-light)}.separator{color:var(--color-text-light);opacity:.5}.copyright{font-size:.875rem;opacity:.8;margin-top:var(--spacing-sm);margin-bottom:0}@media (max-width: 480px){.button-group{grid-template-columns:1fr}.container{padding-inline:var(--spacing-sm)}.footer-links{flex-direction:column;gap:var(--spacing-sm)}.separator{display:none}}@media (min-width: 481px) and (max-width: 768px){.button-group{grid-template-columns:1fr}.container{padding-inline:var(--spacing-md)}}@media (min-width: 769px){.container{padding-inline:var(--spacing-xl)}.main-nav{flex-direction:row;justify-content:space-between}.nav-links{width:auto;padding:0}.logo-container{flex-direction:row}.title-container{text-align:left}}@media (hover: none){.panel{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}input,select,textarea{font-size:16px}}.blog-container{max-width:800px;margin:0 auto;background-color:var(--color-panel);box-shadow:var(--shadow-md);border-radius:var(--border-radius-md);margin-top:var(--spacing-lg);margin-bottom:var(--spacing-xxl);border:1px solid var(--color-border);overflow:hidden}.blog-content{padding:clamp(var(--spacing-md),4vw,var(--spacing-xl))}.blog-title{color:var(--color-primary-dark);font-size:clamp(1rem,4vw + .5rem,2.5rem);margin-bottom:var(--spacing-lg);text-align:center;border-bottom:3px solid var(--color-primary);padding-bottom:var(--spacing-md);font-weight:var(--font-weight-bold);line-height:1.2}.blog-h2{color:var(--color-primary-dark);font-size:clamp(1.25rem,2.5vw + .5rem,1.8rem);margin:var(--spacing-xl) 0 var(--spacing-md) 0;padding-left:var(--spacing-sm);border-left:4px solid var(--color-primary);font-weight:var(--font-weight-bold);line-height:1.2}.blog-h3{color:var(--color-primary-dark);font-size:clamp(1.1rem,2vw + .3rem,1.4rem);margin:var(--spacing-lg) 0 var(--spacing-sm) 0;font-weight:var(--font-weight-bold);line-height:1.3}.blog-p{margin-bottom:var(--spacing-md);text-align:justify;line-height:1.7;color:var(--color-text-primary)}.intro-text{font-size:clamp(1rem,1.5vw + .2rem,1.1rem);color:var(--color-text-secondary);background-color:var(--color-accent);padding:var(--spacing-lg);border-radius:var(--border-radius-md);margin:var(--spacing-lg) 0;border-left:4px solid var(--color-primary);line-height:1.6}.stage-table{width:100%;border-collapse:collapse;margin:var(--spacing-lg) 0;background-color:var(--color-panel);box-shadow:var(--shadow-md);border-radius:var(--border-radius-md);overflow:hidden;border:1px solid var(--color-border)}.stage-table th{background-color:var(--color-primary);color:var(--color-text-light);padding:var(--spacing-md);text-align:left;font-weight:var(--font-weight-bold);font-size:clamp(.9rem,1.2vw + .2rem,1rem)}.stage-table td{padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--color-border);color:var(--color-text-primary);line-height:1.5}.stage-table tr:nth-child(2n){background-color:var(--color-background)}.stage-table tr:hover{background-color:var(--color-accent);transition:background-color var(--transition-fast)}.highlight-box{background-color:var(--color-accent);border:1px solid var(--color-primary-light);border-radius:var(--border-radius-md);padding:var(--spacing-lg);margin:var(--spacing-lg) 0}.warning-box{background-color:#ecc94b1a;border:1px solid var(--color-warning);border-radius:var(--border-radius-md);padding:var(--spacing-lg);margin:var(--spacing-lg) 0;color:var(--color-text-primary)}.care-tips{background-color:var(--color-accent);border-left:4px solid var(--color-primary);padding:var(--spacing-lg);margin:var(--spacing-lg) 0;border-radius:0 var(--border-radius-md) var(--border-radius-md) 0}.care-tips ul{margin:var(--spacing-sm) 0 0 var(--spacing-md);padding-left:var(--spacing-md)}.care-tips li{margin-bottom:var(--spacing-xs);line-height:1.6}.faq-section{background-color:var(--color-background);padding:var(--spacing-xl);border-radius:var(--border-radius-md);margin-top:var(--spacing-xxl);border:1px solid var(--color-border)}.faq-item{margin-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-md)}.faq-question{font-weight:var(--font-weight-bold);color:var(--color-primary-dark);font-size:clamp(1rem,1.5vw + .2rem,1.1rem);margin-bottom:var(--spacing-xs);line-height:1.4}.faq-answer{color:var(--color-text-secondary);line-height:1.6}.faq-answer a{color:var(--color-primary);transition:color var(--transition-fast)}.faq-answer a:hover{color:var(--color-primary-dark)}.key-points{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--color-text-light);padding:var(--spacing-xl);border-radius:var(--border-radius-lg);margin:var(--spacing-lg) 0;box-shadow:var(--shadow-md)}.key-points .blog-h3{color:var(--color-text-light);margin-bottom:var(--spacing-md);border:none;padding:0}.key-points ul{list-style-type:none;padding-left:0;margin:0}.key-points li{padding:var(--spacing-xs) 0;padding-left:var(--spacing-lg);position:relative;line-height:1.6}.key-points li:before{content:"✓";position:absolute;left:0;color:var(--color-success);font-weight:var(--font-weight-bold);font-size:1.2em}.image-placeholder{background:linear-gradient(45deg,var(--color-background),var(--color-border));border:2px dashed var(--color-secondary-light);border-radius:var(--border-radius-md);padding:var(--spacing-xxl);text-align:center;color:var(--color-text-tertiary);margin:var(--spacing-lg) 0;font-style:italic}.conclusion{background-color:var(--color-secondary-light);color:var(--color-text-light);padding:var(--spacing-xl);border-radius:var(--border-radius-lg);margin-top:var(--spacing-xxl);text-align:center}.conclusion .blog-h2{color:var(--color-text-light);border-left:none;padding-left:0}.conclusion .blog-p{color:var(--color-text-light)}@media (max-width: 480px){.blog-container{margin:var(--spacing-sm);border-radius:var(--border-radius-sm)}.blog-content{padding:var(--spacing-md)}.stage-table{font-size:.875rem}.stage-table th,.stage-table td{padding:var(--spacing-xs) var(--spacing-sm)}.key-points,.care-tips,.highlight-box,.warning-box{padding:var(--spacing-md)}}@media (min-width: 481px) and (max-width: 768px){.blog-container{margin:var(--spacing-md)}}.breadcrumb{background-color:var(--color-background);padding:var(--spacing-sm) 0;margin-bottom:var(--spacing-lg);border-radius:var(--border-radius-sm);border:1px solid var(--color-border)}.breadcrumb a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}.breadcrumb a:hover{color:var(--color-primary-dark)}