:root{--primary: #26c6da;--primary-dark: #0097a7;--bg-color: #c5e4e7;--white: #ffffff;--dark-text: #00474b;--light-text: #7f9c9f;--input-bg: #f3f9fa;--error: #e17457;--font-family: "Space Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-color);display:flex;justify-content:center;align-items:center;min-height:100vh;color:var(--dark-text)}input,button{font-family:inherit;border:none;outline:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.app-container{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%;max-width:920px;padding:1rem}.logo{letter-spacing:.5rem;color:var(--dark-text);font-size:1.5rem;text-transform:uppercase;text-align:center;line-height:1.5;margin-top:1rem}.calculator-card{background-color:var(--white);border-radius:25px;padding:1.5rem;box-shadow:0 32px 43px #4fa6af33;width:100%;display:grid;grid-template-columns:1fr;gap:2rem}@media(min-width:768px){.app-container{gap:3rem;justify-content:center;min-height:100vh;padding:0}.logo{margin-top:0}.calculator-card{grid-template-columns:1fr 1fr;padding:3rem;gap:3rem}}.input-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:2rem}.label-row{display:flex;justify-content:space-between}label{color:var(--dark-text);font-weight:700}.error-msg{color:var(--error);font-weight:700}.input-wrapper{position:relative;background-color:var(--input-bg);border-radius:5px;padding:.5rem 1rem;display:flex;align-items:center;border:2px solid transparent;transition:border-color .2s}.input-wrapper:focus-within{border-color:var(--primary)}.input-wrapper.error{border-color:var(--error)}.icon{width:12px;height:auto}.input-field{width:100%;background:transparent;text-align:right;font-size:24px;color:var(--dark-text);font-weight:700;cursor:pointer}.input-field::placeholder{color:var(--light-text)}.result-card{background-color:var(--dark-text);border-radius:15px;padding:2rem;display:flex;flex-direction:column;justify-content:space-between;height:100%}@media(min-width:768px){.result-card{padding:2.5rem}}.result-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.result-label{display:flex;flex-direction:column}.label-main{color:var(--white);font-weight:700}.label-sub{color:var(--light-text);font-size:.8rem;font-weight:700}.result-value{color:var(--primary);font-size:clamp(1.5rem,5vw,3rem);font-weight:700;text-align:right}@media(min-width:768px){.result-value{font-size:3rem}}.reset-btn{width:100%;background-color:var(--primary);color:var(--dark-text);font-weight:700;font-size:1.25rem;padding:.75rem;border-radius:5px;cursor:pointer;transition:background-color .2s;margin-top:auto}.reset-btn:hover:not(:disabled){background-color:#9fe8df}.reset-btn:disabled{background-color:#0d686d;color:#054045;cursor:not-allowed}.inputs-section{display:flex;flex-direction:column;gap:2rem}.tip-selection{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.tip-selection label{color:var(--dark-text);font-weight:700}.tip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}@media(min-width:375px){.tip-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:550px){.tip-grid{grid-template-columns:repeat(3,1fr)}}.tip-btn{background-color:var(--dark-text);color:var(--white);font-size:1.5rem;font-weight:700;padding:.5rem;border-radius:5px;cursor:pointer;transition:background-color .2s,color .2s}.tip-btn:hover{background-color:#9fe8df;color:var(--dark-text)}.tip-btn.active{background-color:var(--primary);color:var(--dark-text)}.custom-tip-input{background-color:var(--input-bg);text-align:right;font-size:1.5rem;font-weight:700;color:var(--dark-text);padding:0 1rem;border-radius:5px;cursor:pointer;border:2px solid transparent}.custom-tip-input:focus{border-color:var(--primary)}.custom-tip-input::placeholder{color:var(--dark-text);text-align:center}