/* === Titrate styles === */
.t-table{width:100%;border-collapse:collapse;font-size:13px}
.t-table th{color:var(--text3);font-weight:600;font-size:11px;letter-spacing:.3px;padding:8px 6px;text-align:center;border-bottom:2px solid var(--border);white-space:nowrap}
.t-table td{padding:6px;text-align:center;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.t-table input{background:var(--input-bg);border:1px solid var(--border);color:var(--text);padding:6px 4px;border-radius:6px;font-size:13px;font-weight:500;text-align:center;width:72px;outline:none;transition:border-color .3s}
.t-table input:focus{border-color:var(--accent)}
.t-name{font-weight:600;text-align:left !important;white-space:nowrap;padding-left:8px !important}
.t-sub{display:block;font-size:10px;font-weight:400;color:var(--text4);line-height:1.4}
.t-fixed{color:var(--warn);font-weight:700;font-size:12px}
.t-out{color:var(--text3);font-size:13px;font-weight:500}
.t-result{font-size:16px;font-weight:700;color:var(--accent)}
.t-gfo-result{font-size:20px;font-weight:700;color:var(--accent);padding:6px 0}
.t-tips{font-size:12px;color:var(--text3);line-height:2}
.t-tips strong{color:var(--text)}
.t-tips p{margin:0}

@media(max-width:600px){
  .container{padding:12px;padding-bottom:50px}
  .page-hd{flex-wrap:wrap;gap:8px}
  .page-hd h1{font-size:18px}
  .nav-right{flex-wrap:wrap}
  .prow{grid-template-columns:60px repeat(4,1fr);gap:4px}
  .stp button{width:24px;font-size:14px}
  .stp input{width:32px;font-size:14px}
  .chart-sec .chart-wrap{height:300px}
  .chart-sec{padding:10px}
  .rlabel{font-size:11px}
  #qrcode{min-width:200px;min-height:200px}
  .qr-sec{padding:12px}
  .seg-item{padding:4px 12px;font-size:12px}
  .input-row{gap:10px}
  .input-group{min-width:0;flex-basis:calc(50% - 6px)}
  .result-row{gap:10px}
  .result-card{min-width:calc(50% - 6px)}
  .config-row{flex-direction:column;align-items:flex-start;gap:8px}
}