.tool-ui{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);margin-bottom:var(--space-8);padding:var(--space-8)}.tip-calculator{display:flex;flex-direction:column;gap:var(--space-6)}.tip-rounding-note,.tip-status{color:var(--color-text-secondary);font-size:var(--text-sm);line-height:1.5;margin:0}.tip-status.is-error{color:var(--color-danger,#b91c1c)}.tip-form{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl);display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-6)}.tip-form__row{display:grid;gap:var(--space-5);grid-template-columns:1fr 1fr}.input-group{display:flex;flex-direction:column;gap:var(--space-2)}.label{display:block;font-size:var(--text-sm);font-weight:var(--font-semibold)}.input,.label{color:var(--color-text)}.input{background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-xl);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);outline:none;padding:14px 18px;transition:all var(--transition-fast);width:100%}.input:hover{border-color:var(--color-border-strong)}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(79,70,229,.12)}.input::placeholder{color:var(--color-text-muted)}.select{appearance:none;-webkit-appearance:none;background:var(--color-bg);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;border:2px solid var(--color-border);border-radius:var(--radius-xl);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-base);outline:none;padding:14px 40px 14px 18px;transition:all var(--transition-fast);width:100%}.select:hover{border-color:var(--color-border-strong)}.select:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(79,70,229,.12)}.input-with-prefix{position:relative}.prefix{color:var(--color-text-muted);left:16px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.input-with-prefix .input,.prefix{font-family:var(--font-mono);font-size:var(--text-xl);font-weight:700}.input-with-prefix .input{letter-spacing:.02em;padding-left:40px}.slider-label{align-items:center;color:var(--color-text-secondary);display:flex;font-size:var(--text-sm);justify-content:space-between;margin-bottom:var(--space-2)}.slider-label span{background:var(--color-primary-light);color:var(--color-primary);font-size:var(--text-sm);font-weight:var(--font-bold);padding:2px 10px}.slider,.slider-label span{border-radius:var(--radius-full)}.slider{accent-color:var(--color-primary);-webkit-appearance:none;appearance:none;background:var(--color-bg-tertiary);cursor:pointer;height:6px;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-primary);border-radius:50%;box-shadow:0 2px 6px rgba(79,70,229,.4);cursor:pointer;height:20px;transition:all var(--transition-fast);width:20px}.slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.tip-presets{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}.tip-preset{background:var(--color-bg-secondary);border:2px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-secondary);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-semibold);padding:8px 16px;transition:all var(--transition-fast)}.tip-preset--active{background:var(--color-primary);border-color:var(--color-primary);box-shadow:0 2px 8px rgba(79,70,229,.3);color:#fff}.tip-preset:hover:not(.tip-preset--active){background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}.tip-result{display:grid;gap:var(--space-4);grid-template-columns:repeat(3,1fr)}.tip-result__per,.tip-result__tip,.tip-result__total{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);padding:var(--space-6);text-align:center;transition:all var(--transition-fast)}.tip-result__per:hover,.tip-result__tip:hover,.tip-result__total:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}.tip-big-num{color:var(--color-primary);font-family:var(--font-body);font-size:var(--text-3xl);font-weight:800;letter-spacing:-.02em;line-height:1}.tip-big-num--highlight{color:var(--color-success)}.tip-lbl{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--font-semibold);letter-spacing:1.5px;margin-top:var(--space-3);text-transform:uppercase}@media (max-width:640px){.tool-ui{padding:var(--space-5)}.tip-form__row,.tip-result{grid-template-columns:1fr}.tip-result{gap:var(--space-3)}.tip-big-num{font-size:var(--text-2xl)}.tip-result__per,.tip-result__tip,.tip-result__total{padding:var(--space-5)}}@media (max-width:480px){.tip-result{grid-template-columns:1fr}}