.time-calculator-page{max-width:900px;margin:0 auto;padding:2rem 1.5rem 4rem}.time-calculator-page .breadcrumb{color:var(--color-text-tertiary);align-items:center;gap:.5rem;margin-bottom:1.5rem;font-size:.875rem;display:flex}.time-calculator-page .breadcrumb a{color:var(--color-accent);text-decoration:none}.time-calculator-page .breadcrumb a:hover{text-decoration:underline}.time-calculator-page .breadcrumb .separator{color:var(--color-border)}.calc-hero{text-align:center;background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);margin-bottom:2rem;padding:2rem}.calc-hero h1{color:var(--color-text-primary);margin:0 0 .5rem;font-size:2rem;font-weight:700}.hero-subtitle{color:var(--color-text-secondary);margin:0 0 1.5rem}.current-time-display{flex-direction:column;gap:.25rem;display:flex}.current-time{color:var(--color-accent);font-family:Roboto Mono,monospace;font-size:2.5rem;font-weight:700}.current-date{color:var(--color-text-secondary);font-size:.9375rem}.mode-selector{flex-wrap:wrap;gap:.5rem;margin-bottom:2rem;display:flex}.mode-btn{background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);min-width:150px;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);flex:1;padding:.875rem 1rem;font-weight:500}.mode-btn:hover{background:var(--color-bg-tertiary)}.mode-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.calculator-card{background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);margin-bottom:2rem;padding:2rem}.calculator-card h2{color:var(--color-text-primary);margin:0 0 1.5rem;font-size:1.25rem;font-weight:700}.calc-row{margin-bottom:1.5rem}.calc-row label{color:var(--color-text-secondary);flex-direction:column;gap:.5rem;font-size:.875rem;display:flex}.time-input{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);padding:.75rem 1rem;font-family:Roboto Mono,monospace;font-size:1.25rem}.time-input:focus{border-color:var(--color-accent);outline:none}.operation-row{gap:.5rem;display:flex}.op-btn{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);flex:1;padding:.75rem 1rem;font-size:1rem;font-weight:600}.op-btn:hover{background:var(--color-bg-tertiary)}.op-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.time-inputs{gap:1rem;display:flex}.time-inputs label{flex:1}.number-input{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;color:var(--color-text-primary);text-align:center;padding:.75rem 1rem;font-family:Roboto Mono,monospace;font-size:1.25rem}.number-input:focus{border-color:var(--color-accent);outline:none}.time-range{align-items:flex-end;gap:1rem;display:flex}.time-range label{flex:1}.to-label{color:var(--color-text-tertiary);padding-bottom:.75rem;font-weight:500}.result-box{border:1px solid var(--color-success);border-radius:var(--radius-md);text-align:center;background:#22c55e1a;padding:1.5rem}.result-label{color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.75rem;display:block}.result-value{color:var(--color-success);font-family:Roboto Mono,monospace;font-size:2.5rem;font-weight:700;display:block}.result-formula{color:var(--color-text-secondary);margin-top:.5rem;font-size:.875rem;display:block}.convert-info{color:var(--color-text-secondary);margin:0 0 1rem}.convert-links{flex-direction:column;gap:.5rem;display:flex}.convert-link{background:var(--color-bg-primary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-accent);transition:all var(--transition-fast);padding:1rem;font-weight:500;text-decoration:none}.convert-link:hover{background:var(--color-bg-tertiary);border-color:var(--color-accent)}.common-section{margin-bottom:2rem}.common-section h2{color:var(--color-text-primary);margin:0 0 1rem;font-size:1.25rem;font-weight:700}.common-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;display:grid}.common-card{background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:1rem}.common-card h3{color:var(--color-text-primary);margin:0 0 .5rem;font-size:.875rem;font-weight:600}.common-card p{color:var(--color-text-secondary);margin:0;font-size:.875rem}.common-card strong{color:var(--color-accent)}.how-section{margin-bottom:2rem}.how-section h2{color:var(--color-text-primary);margin:0 0 1rem;font-size:1.25rem;font-weight:700}.how-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;display:grid}.how-step{background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:1.25rem}.step-number{background:var(--color-accent);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:2rem;height:2rem;margin-bottom:.75rem;font-size:.875rem;font-weight:700;display:flex}.how-step h3{color:var(--color-text-primary);margin:0 0 .5rem;font-size:.9375rem;font-weight:600}.how-step p{color:var(--color-text-secondary);margin:0;font-size:.875rem;line-height:1.5}.usecases-section{margin-bottom:2rem}.usecases-section h2{color:var(--color-text-primary);margin:0 0 1rem;font-size:1.25rem;font-weight:700}.usecases-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;display:grid}.usecase-card{background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);text-align:center;padding:1.25rem}.usecase-icon{margin-bottom:.75rem;font-size:2rem;display:block}.usecase-card h3{color:var(--color-text-primary);margin:0 0 .5rem;font-size:.9375rem;font-weight:600}.usecase-card p{color:var(--color-text-secondary);margin:0;font-size:.8125rem;line-height:1.5}.time-calculator-page .faq-section{background:var(--color-bg-secondary);border-radius:var(--radius-lg);margin-bottom:2rem;padding:2rem}.time-calculator-page .faq-section h2{color:var(--color-text-primary);margin:0 0 1.5rem;font-size:1.25rem;font-weight:700}.time-calculator-page .faq-item{background:var(--color-bg-primary);border-radius:var(--radius-md);margin-bottom:1rem;padding:1.25rem}.time-calculator-page .faq-item:last-child{margin-bottom:0}.time-calculator-page .faq-item h3{color:var(--color-text-primary);margin:0 0 .75rem;font-size:.9375rem;font-weight:600}.time-calculator-page .faq-item p{color:var(--color-text-secondary);margin:0;font-size:.875rem;line-height:1.6}.related-section{margin-bottom:2rem}.related-section h2{color:var(--color-text-primary);margin:0 0 1rem;font-size:1.25rem;font-weight:700}.related-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;display:grid}.related-card{background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);transition:all var(--transition-fast);padding:1.25rem;text-decoration:none}.related-card:hover{background:var(--color-bg-tertiary);border-color:var(--color-accent);transform:translateY(-2px)}.related-card h3{color:var(--color-accent);margin:0 0 .5rem;font-size:.9375rem;font-weight:600}.related-card p{color:var(--color-text-secondary);margin:0;font-size:.8125rem}@media (max-width:768px){.time-calculator-page{padding:1.5rem 1rem 3rem}.calc-hero{padding:1.5rem}.calc-hero h1{font-size:1.5rem}.current-time{font-size:2rem}.mode-selector{flex-direction:column}.mode-btn{min-width:100%}.calculator-card{padding:1.5rem}.time-inputs{flex-direction:column;gap:1rem}.time-range{flex-direction:column;align-items:stretch}.to-label{text-align:center;padding:.5rem 0}.result-value{font-size:2rem}.time-calculator-page .faq-section{padding:1.5rem}}