.tip-calculator{max-width:900px;margin:0 auto;padding:1.5rem;font-family:system-ui,-apple-system,sans-serif}.tip-calc-header{text-align:center;margin-bottom:2rem}.tip-header-accent{width:60px;height:4px;background:linear-gradient(90deg,#f59e0b,#d97706);border-radius:9999px;margin:0 auto 1.5rem}.tip-calc-title{font-size:clamp(1.75rem,5vw,2.5rem);font-weight:700;color:#0f172a;margin:0 0 .75rem;line-height:1.2}.tip-calc-description{font-size:1.1rem;color:#475569;line-height:1.6;max-width:600px;margin:0 auto}.tip-formula-section{background:linear-gradient(135deg,#fffbeb,#fef3c7);border:1px solid #fde68a;border-radius:1rem;padding:1.5rem;margin-bottom:2rem}.tip-formula-title{font-size:.875rem;font-weight:600;color:#92400e;text-transform:uppercase;letter-spacing:.1em;margin:0 0 1rem;text-align:center}.tip-formula-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.tip-formula-card{background:#fff;border-radius:.75rem;padding:1rem;box-shadow:0 4px 6px -1px #0000001a;text-align:center;transition:transform .2s,box-shadow .2s}.tip-formula-card:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a}.tip-formula-badge{display:inline-block;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-size:.7rem;font-weight:600;padding:.25rem .75rem;border-radius:9999px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.tip-formula-card .formula-display{overflow-x:auto;padding:.5rem 0;min-height:3rem;display:flex;align-items:center;justify-content:center}.tip-formula-card .formula-display::-webkit-scrollbar{height:4px}.tip-formula-card .formula-display::-webkit-scrollbar-thumb{background:#fde68a;border-radius:2px}.tip-quick-section{margin-bottom:1.5rem}.tip-quick-title{font-size:.875rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.1em;margin:0 0 1rem;text-align:center}.tip-quick-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.tip-quick-btn{display:flex;flex-direction:column;align-items:center;padding:.75rem 1rem;background:#fff;border:2px solid #e2e8f0;border-radius:.75rem;cursor:pointer;transition:all .15s;min-width:90px}.tip-quick-btn:hover{border-color:#f59e0b;background:#fffbeb;transform:translateY(-2px);box-shadow:0 4px 6px -1px #0000001a}.tip-quick-btn.active{border-color:#f59e0b;background:#fef3c7;box-shadow:0 0 0 3px #fde68a}.tip-quick-percent{font-size:1.25rem;font-weight:700;color:#d97706}.tip-quick-label{font-size:.65rem;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}.tip-calc-form{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.5rem;margin-bottom:2rem;box-shadow:0 1px 3px #0000001a}.tip-input-group{display:flex;flex-direction:column;gap:1.25rem}.tip-input-field{display:flex;flex-direction:column;gap:.5rem}.tip-input-label{font-size:.875rem;font-weight:600;color:#334155}.tip-input-wrapper{position:relative;display:flex;align-items:center}.tip-form-input{width:100%;padding:.875rem 3rem .875rem 1rem;border:2px solid #e2e8f0;border-radius:.5rem;font-size:1.125rem;font-weight:500;color:#0f172a;background:#f8fafc;transition:all .15s;-moz-appearance:textfield}.tip-form-input::-webkit-outer-spin-button,.tip-form-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tip-form-input.tip-with-prefix{padding-left:2.5rem}.tip-form-input:hover{border-color:#cbd5e1}.tip-form-input:focus{outline:none;border-color:#f59e0b;background:#fff;box-shadow:0 0 0 3px #fef3c7}.tip-input-prefix{position:absolute;left:1rem;font-size:1rem;font-weight:600;color:#64748b;pointer-events:none}.tip-input-suffix{position:absolute;right:1rem;font-size:.875rem;font-weight:500;color:#64748b;pointer-events:none}.tip-form-actions{display:flex;gap:.75rem;margin-top:1.5rem}.tip-btn-calculate{flex:2;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.5rem;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;border-radius:.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px -3px #f59e0b}.tip-btn-calculate:hover{background:linear-gradient(135deg,#d97706,#b45309);transform:translateY(-2px);box-shadow:0 6px 20px -3px #f59e0b}.tip-btn-arrow{font-size:1.25rem;transition:transform .15s}.tip-btn-calculate:hover .tip-btn-arrow{transform:translate(4px)}.tip-btn-reset{flex:1;padding:.875rem 1rem;background:transparent;color:#475569;border:2px solid #e2e8f0;border-radius:.5rem;font-size:1rem;font-weight:500;cursor:pointer;transition:all .15s}.tip-btn-reset:hover{background:#f1f5f9;border-color:#cbd5e1}.tip-results-section{background:linear-gradient(135deg,#f8fafc,#fff);border:2px solid #fde68a;border-radius:1rem;padding:2rem;margin-bottom:2rem;animation:tipSlideUp .5s ease-out}.tip-results-section.tip-hidden{display:none}@keyframes tipSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tip-results-title{font-size:1.25rem;font-weight:700;color:#1e293b;margin:0 0 1.5rem;text-align:center}.tip-results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}.tip-result-card{display:flex;align-items:center;gap:.75rem;background:#fff;padding:1rem;border-radius:.75rem;border:1px solid #e2e8f0;transition:all .2s}.tip-result-card:hover{border-color:#fde68a;box-shadow:0 4px 6px -1px #0000001a}.tip-result-card.tip-result-primary{background:linear-gradient(135deg,#f59e0b,#d97706);border:none;color:#fff}.tip-result-card.tip-result-primary .tip-result-label{color:#fef3c7}.tip-result-card.tip-result-primary .tip-result-value{color:#fff}.tip-result-card.tip-result-highlight{background:linear-gradient(135deg,#10b981,#059669);border:none;color:#fff}.tip-result-card.tip-result-highlight .tip-result-label{color:#d1fae5}.tip-result-card.tip-result-highlight .tip-result-value{color:#fff}.tip-result-icon{font-size:1.5rem;flex-shrink:0}.tip-result-content{display:flex;flex-direction:column;gap:2px}.tip-result-label{font-size:.7rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.tip-result-value{font-size:1.25rem;font-weight:700;color:#0f172a}.tip-content-section{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:2rem;margin-bottom:1.5rem;box-shadow:0 1px 3px #0000001a}.tip-section-title{font-size:1.5rem;font-weight:700;color:#0f172a;margin:0 0 1rem;padding-bottom:.75rem;border-bottom:2px solid #fde68a}.tip-section-para{font-size:1rem;color:#475569;line-height:1.8;margin:0 0 1rem}.tip-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1.5rem}.tip-feature-card{text-align:center;padding:1.5rem;background:#f8fafc;border-radius:.75rem;transition:all .2s}.tip-feature-card:hover{transform:translateY(-4px);box-shadow:0 4px 6px -1px #0000001a}.tip-feature-icon{font-size:2rem;display:block;margin-bottom:.75rem}.tip-feature-title{font-size:1rem;font-weight:600;color:#1e293b;margin:0 0 .5rem}.tip-feature-desc{font-size:.875rem;color:#64748b;line-height:1.5;margin:0}.tip-subsection{margin-top:1.5rem}.tip-subsection-title{font-size:1.25rem;font-weight:600;color:#1e293b;margin:0 0 1rem}.tip-items-grid,.tip-content-grid,.tip-regions-grid,.tip-strategies-grid,.tip-mistakes-grid,.tip-shortcuts-grid,.tip-situations-grid,.tip-platforms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.tip-item-card,.tip-content-card,.tip-region-card,.tip-strategy-card,.tip-mistake-card,.tip-shortcut-card,.tip-situation-card,.tip-platform-card{background:#f8fafc;padding:1rem;border-radius:.5rem;border-left:4px solid #f59e0b}.tip-item-label,.tip-content-scenario,.tip-region-name,.tip-strategy-method,.tip-shortcut-percent,.tip-situation-scenario,.tip-platform-name{font-size:.9rem;font-weight:600;color:#1e293b;margin:0 0 .5rem}.tip-item-desc,.tip-content-details,.tip-region-details,.tip-strategy-info,.tip-shortcut-method,.tip-situation-explain,.tip-platform-guidance{font-size:.875rem;color:#475569;line-height:1.5;margin:0}.tip-content-guideline,.tip-region-standard{font-size:.875rem;font-weight:600;color:#b45309;margin:0 0 .25rem}.tip-strategy-when,.tip-strategy-tip{font-size:.8rem;color:#475569;margin:0 0 .25rem}.tip-mistake-wrong{color:#dc2626;font-weight:500;margin:0 0 .25rem}.tip-mistake-correct{color:#059669;font-weight:500;margin:0 0 .5rem}.tip-mistake-explain{font-size:.875rem;color:#475569;margin:0}.tip-shortcut-example{font-size:.8rem;color:#64748b;font-style:italic;margin-top:.5rem}.tip-considerations-list{margin:1rem 0 0;padding-left:1.5rem}.tip-considerations-list li{color:#475569;margin-bottom:.5rem;line-height:1.5}.tip-faq-list{margin-top:1rem}.tip-faq-item{background:#f8fafc;border-radius:.5rem;margin-bottom:.5rem;overflow:hidden}.tip-faq-question{padding:1rem;font-weight:600;color:#1e293b;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}.tip-faq-question::-webkit-details-marker{display:none}.tip-faq-question:after{content:"+";font-size:1.25rem;color:#f59e0b}.tip-faq-item[open] .tip-faq-question:after{content:"−"}.tip-faq-answer{padding:0 1rem 1rem;color:#475569;line-height:1.6;margin:0}@media (max-width: 640px){.tip-calculator{padding:1rem}.tip-formula-grid{grid-template-columns:1fr}.tip-quick-btn{min-width:70px;padding:.5rem .75rem}.tip-quick-percent{font-size:1rem}.tip-results-grid{grid-template-columns:1fr 1fr}.tip-form-actions{flex-direction:column}.tip-features-grid,.tip-items-grid,.tip-content-grid,.tip-regions-grid,.tip-strategies-grid,.tip-mistakes-grid,.tip-shortcuts-grid,.tip-situations-grid,.tip-platforms-grid{grid-template-columns:1fr}}