/* Tip Calculator — style.css v1.0 */
.tipc-wrap { max-width:520px; margin:0 auto; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:#1a1a1a; }
.tipc-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.tipc-icon { font-size:34px; line-height:1; }
.tipc-title { font-size:22px !important; font-weight:600 !important; margin:0 0 3px !important; padding:0 !important; border:none !important; color:#1a1a1a !important; }
.tipc-sub { font-size:13px; color:#666; margin:0; }
.tipc-inputs { display:flex; flex-direction:column; gap:16px; margin-bottom:4px; }
.tipc-group { }
.tipc-lbl { display:block; font-size:13px; font-weight:500; color:#555; margin-bottom:6px; }
.tipc-iw { position:relative; }
.tipc-iw input { width:100%; box-sizing:border-box; padding:11px 36px 11px 28px; border:1.5px solid #d0d0d0; border-radius:10px; font-size:18px; font-weight:600; color:#1a1a1a; background:#fff; outline:none; transition:border-color .15s; -moz-appearance:textfield; }
.tipc-iw input::-webkit-inner-spin-button,.tipc-iw input::-webkit-outer-spin-button { -webkit-appearance:none; }
.tipc-iw input:focus { border-color:#10B981; box-shadow:0 0 0 3px rgba(16,185,129,.1); }
.tipc-pre { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:15px; color:#888; pointer-events:none; font-weight:600; }
.tipc-suf { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:14px; color:#888; pointer-events:none; }

/* Tip % buttons */
.tipc-tip-btns { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:8px; }
.tipc-pct-btn { padding:9px 14px; font-size:14px; font-weight:600; border:1.5px solid #d0d0d0; border-radius:9px; background:#fff; color:#555; cursor:pointer; transition:background .13s,color .13s,border-color .13s; min-width:52px; text-align:center; }
.tipc-pct-btn:hover:not(.act) { background:#f0fdf4; border-color:#6EE7B7; }
.tipc-pct-btn.act { background:#D1FAE5; color:#065F46; border-color:#6EE7B7; }
.tipc-custom-row { }
.tipc-custom-iw { max-width:130px; }
.tipc-custom-iw input { padding:8px 32px 8px 12px; font-size:14px; }

/* Split people */
.tipc-split-row { display:flex; align-items:center; gap:12px; }
.tipc-split-btn { width:38px; height:38px; border-radius:50%; border:1.5px solid #d0d0d0; background:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:600; transition:background .13s; color:#1a1a1a; }
.tipc-split-btn:hover { background:#D1FAE5; border-color:#6EE7B7; }
.tipc-people-display { font-size:20px; font-weight:700; color:#1a1a1a; min-width:90px; text-align:center; }
.tipc-people-display span { font-size:14px; font-weight:400; color:#888; }

/* Round toggle */
.tipc-round-toggle { display:flex; border:1.5px solid #d0d0d0; border-radius:9px; overflow:hidden; }
.tipc-rtbtn { flex:1; padding:8px 10px; font-size:12.5px; font-weight:500; border:none; border-right:1px solid #d0d0d0; background:#fff; color:#555; cursor:pointer; transition:background .13s,color .13s; }
.tipc-rtbtn:last-child { border-right:none; }
.tipc-rtbtn:hover:not(.act) { background:#f0fdf4; }
.tipc-rtbtn.act { background:#D1FAE5; color:#065F46; font-weight:600; }

/* Result cards */
.tipc-cards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:20px; animation:tipc-in .22s ease; }
@media(max-width:420px){ .tipc-cards { grid-template-columns:1fr 1fr; } }
@keyframes tipc-in { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.tipc-card { border-radius:12px; padding:14px 12px; text-align:center; border:1px solid; }
.tipc-card-tip   { background:#D1FAE5; border-color:#6EE7B7; }
.tipc-card-total { background:#1B4332; border-color:#1B4332; color:#fff; }
.tipc-card-pp    { background:#ECFDF5; border-color:#A7F3D0; }
.tipc-card-val { font-size:22px; font-weight:700; margin-bottom:3px; }
.tipc-card-lbl { font-size:11px; opacity:.8; }
.tipc-card-tip   .tipc-card-val { color:#065F46; }
.tipc-card-total .tipc-card-val { color:#fff; font-size:24px; }
.tipc-card-total .tipc-card-lbl { opacity:.7; }
.tipc-card-pp    .tipc-card-val { color:#065F46; }

/* Per person breakdown */
.tipc-per-person-card { background:#f0fdf4; border:1px solid #86efac; border-radius:10px; padding:12px 16px; margin-top:12px; }
.tipc-pp-row { display:flex; justify-content:space-between; padding:5px 0; font-size:13px; border-bottom:1px solid #d1fae5; }
.tipc-pp-row:last-child { border-bottom:none; font-weight:700; font-size:15px; }
.tipc-pp-lbl { color:#166534; }
.tipc-pp-val { color:#065F46; font-weight:600; }

/* Tip guide */
.tipc-tip-guide { background:#fafafa; border:1px solid #e8e8e8; border-radius:11px; padding:14px 16px; margin-top:14px; }
.tipc-guide-title { font-size:12px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:.4px; margin-bottom:10px; }
.tipc-guide-row { display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid #f0f0f0; font-size:13px; }
.tipc-guide-row:last-child { border-bottom:none; }
.tipc-guide-pct { font-size:15px; font-weight:700; width:36px; flex-shrink:0; color:#065F46; }
.tipc-guide-label { flex:1; color:#1a1a1a; }
.tipc-guide-amt { font-family:monospace; font-weight:600; color:#1a1a1a; }
.tipc-guide-row.current { background:#D1FAE5; border-radius:7px; padding:7px 8px; margin:2px -8px; }
.tipc-guide-row.current .tipc-guide-pct { color:#065F46; }

/* Reset */
.tipc-reset-btn { display:block; width:100%; margin-top:12px; padding:9px; font-size:13px; color:#999; background:none; border:1px solid #e8e8e8; border-radius:8px; cursor:pointer; transition:background .13s; }
.tipc-reset-btn:hover { background:#f5f5f5; color:#333; }