/* ===== GreenTea Brewing Calculator ===== */
.gtbc-wrap{max-width:800px;margin:0 auto;font-family:Inter,system-ui,-apple-system,sans-serif;color:#111827}

/* Controls */
.gtbc-controls{display:flex;justify-content:center;margin-bottom:20px}
.gtbc-unit-toggle{display:inline-flex;background:#f0f4f0;border-radius:8px;padding:3px;gap:2px}
.gtbc-unit{padding:6px 18px;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;background:transparent;color:#888;transition:all .2s}
.gtbc-unit.active{background:#fff;color:#1f2937;box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* Tea grid */
.gtbc-tea-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:24px}
.gtbc-tea-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 8px 12px;border:2px solid #e5e7eb;border-radius:12px;background:#fff;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);text-align:center}
.gtbc-tea-btn:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);border-color:#ccd5cc}
.gtbc-tea-btn.active{border-color:var(--tea-color);background:color-mix(in srgb,var(--tea-color) 5%,#fff);transform:scale(1.03);box-shadow:0 4px 16px color-mix(in srgb,var(--tea-color) 12%,transparent)}
.gtbc-tea-emoji{font-size:28px;margin-bottom:4px}
.gtbc-tea-name{font-size:13px;font-weight:600;color:#111827;line-height:1.2}
.gtbc-tea-btn.active .gtbc-tea-name{color:var(--tea-color)}
.gtbc-tea-quick{font-size:11px;color:#6b7280;margin-top:3px}

/* Result panel */
.gtbc-result{background:#fff;border:1px solid #e0e8e0;border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.06);animation:gtbcSlideUp .35s ease-out}
@keyframes gtbcSlideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.gtbc-result-header{padding:16px 24px;display:flex;align-items:center;gap:10px;border-bottom:2px solid #f0f4f0;background:linear-gradient(135deg,var(--gtbc-color-light,#f0faf2),#fff)}
.gtbc-result-emoji{font-size:24px}
.gtbc-result-name{font-size:20px;font-weight:700;color:#1f2937}
.gtbc-result-flavor{font-size:13px;color:#4b5563}

/* Strength */
.gtbc-strength-bar{padding:14px 24px;border-bottom:1px solid #f0f4f0}
.gtbc-strength-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#6b7280;margin-bottom:8px}
.gtbc-strength-btns{display:flex;gap:8px}
.gtbc-str-btn{flex:1;padding:10px 8px;border:2px solid #e5e7eb;border-radius:10px;background:#fafafa;cursor:pointer;text-align:center;transition:all .2s}
.gtbc-str-btn.active{border-color:var(--gtbc-color,#0d7f4d);background:color-mix(in srgb,var(--gtbc-color,#0d7f4d) 5%,#fff)}
.gtbc-str-name{display:block;font-size:14px;font-weight:600;color:#374151}
.gtbc-str-btn.active .gtbc-str-name{color:var(--gtbc-color,#0d7f4d)}
.gtbc-str-desc{display:block;font-size:11px;color:#6b7280}

/* Values grid */
.gtbc-values-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;padding:24px}
.gtbc-val-block{text-align:center;display:flex;flex-direction:column;align-items:center}
.gtbc-val-block:not(:last-child){border-right:1px solid #f0f4f0;padding-right:16px}
.gtbc-val-block:not(:first-child){padding-left:16px}
.gtbc-val-num{font-size:26px;font-weight:700;color:#111827;margin-top:8px}
.gtbc-val-amount{font-size:18px}
.gtbc-val-label{font-size:11px;color:#6b7280;margin-top:2px}
.gtbc-val-range{font-size:11px;color:#9ca3af;margin-top:2px}

/* Thermometer */
.gtbc-thermo{width:28px;height:72px;background:#e8ece8;border-radius:14px;position:relative;overflow:hidden}
.gtbc-thermo-fill{position:absolute;bottom:0;left:0;right:0;background:var(--gtbc-color,#0d7f4d);border-radius:14px;transition:height .5s cubic-bezier(.34,1.56,.64,1)}

/* Ring */
.gtbc-ring{display:block;margin:0 auto}
#gtbc-ring-fill{transition:stroke-dashoffset .5s cubic-bezier(.34,1.56,.64,1),stroke .3s}

/* Infusion dots */
.gtbc-infusions{display:flex;gap:4px;margin-top:8px}
.gtbc-inf-dot{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;transition:all .3s}

/* Timer */
.gtbc-timer-bar{padding:14px 24px;border-top:1px solid #f0f4f0;text-align:center}
.gtbc-timer-start{padding:10px 32px;background:var(--gtbc-color,#0d7f4d);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.gtbc-timer-start:hover{filter:brightness(1.1)}
.gtbc-timer-running{display:flex;align-items:center;justify-content:center;gap:12px}
.gtbc-timer-display{font-size:32px;font-weight:700;min-width:80px;color:#1f2937;transition:color .3s}
.gtbc-timer-display.gtbc-flash{color:#e53e3e;animation:gtbcPulse .5s infinite}
.gtbc-timer-display.gtbc-done{color:#0d7f4d}
@keyframes gtbcPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.gtbc-timer-reset{padding:8px 20px;background:#f5f5f5;color:#666;border:1px solid #ddd;border-radius:8px;font-size:13px;cursor:pointer}

/* Tip */
.gtbc-tip{padding:14px 24px 18px;border-top:1px solid #f0f4f0;background:#fafcfa}
.gtbc-tip-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--gtbc-color,#0d7f4d)}
.gtbc-tip-text{font-size:14px;color:#374151;margin:6px 0 0;line-height:1.6}

/* Profile link */
.gtbc-profile-link{padding:0 24px 18px;background:#fafcfa;text-align:center}
.gtbc-profile-link a{color:#2563eb;font-weight:600;font-size:14px}

/* Reference table */
.gtbc-table-wrap{margin-top:32px}
.gtbc-table-wrap h3{font-size:18px;font-weight:700;color:#1f2937;margin-bottom:12px}
.gtbc-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gtbc-table{width:100%;border-collapse:collapse;font-size:13px}
.gtbc-table thead tr{border-bottom:2px solid #e0e8e0}
.gtbc-table th{padding:10px 12px;text-align:left;font-weight:600;color:#374151;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.gtbc-table td{padding:10px 12px;color:#374151}
.gtbc-table tbody tr{border-bottom:1px solid #f0f4f0;cursor:pointer;transition:background .2s}
.gtbc-table tbody tr:nth-child(even){background:#fafcfa}
.gtbc-table tbody tr:hover{background:#f0faf2}
.gtbc-table tbody tr.active{background:color-mix(in srgb,var(--tea-color,#0d7f4d) 6%,#fff)}
.gtbc-table-emoji{margin-right:6px}
.gtbc-table td a{color:#111827;font-weight:600;text-decoration:none}
.gtbc-table td a:hover{color:#0d7f4d;text-decoration:underline}

/* Responsive */
@media(max-width:640px){
    .gtbc-tea-grid{grid-template-columns:repeat(3,1fr);gap:8px}
    .gtbc-tea-btn{padding:10px 4px 8px}
    .gtbc-tea-emoji{font-size:22px}
    .gtbc-tea-name{font-size:11px}
    .gtbc-tea-quick{font-size:10px}
    .gtbc-values-grid{grid-template-columns:1fr;gap:20px}
    .gtbc-val-block:not(:last-child){border-right:none;border-bottom:1px solid #f0f4f0;padding-right:0;padding-bottom:16px}
    .gtbc-val-block:not(:first-child){padding-left:0}
    .gtbc-result-header{flex-wrap:wrap}
    .gtbc-result-flavor{flex-basis:100%;margin-top:-4px}
    .gtbc-strength-btns{flex-direction:column;gap:6px}
    .gtbc-str-btn{flex-direction:row;justify-content:space-between;padding:12px 14px}
    .gtbc-table{font-size:12px}
    .gtbc-table th,.gtbc-table td{padding:8px 6px}
    .gtbc-result-header,.gtbc-strength-bar,.gtbc-timer-bar,.gtbc-tip,.gtbc-profile-link{padding-left:16px;padding-right:16px}
    .gtbc-values-grid{padding:20px 16px}
}
@media(max-width:420px){
    .gtbc-tea-grid{grid-template-columns:repeat(3,1fr)}
}