/* Twaino Pixel Checker — Title/Meta pixel length tool */

.tw-pc-app{max-width:1200px;margin:0 auto;padding-top:20px;font-family:inherit;color:#1a1a2e}
.tw-pc-app *,.tw-pc-app *::before,.tw-pc-app *::after{box-sizing:border-box}

/* Header */
.tw-pc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;flex-wrap:wrap}
.tw-pc-header-left{display:flex;align-items:center;gap:14px}
.tw-pc-label{font-size:15px;font-weight:700;color:#1a1a2e}
.tw-pc-header-actions{display:flex;gap:6px}
.tw-pc-btn-action{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;font-size:12px;font-weight:500;color:#6b7280;background:#fff;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;transition:all .15s;font-family:inherit;line-height:1}
.tw-pc-btn-action:hover{background:#f3f4f6;color:#1a1a2e;border-color:#d1d5db}
.tw-pc-btn-action svg{flex-shrink:0}

/* ═══ BLOCK 1: Input fields — unified card ═══ */
.tw-pc-block1{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:20px 24px;margin-bottom:10px}

.tw-pc-section{margin:0}
.tw-pc-section-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.tw-pc-section-label{font-size:13px;font-weight:700;color:#1a1a2e}
.tw-pc-meta{font-size:12px;color:#6b7280;margin-left:auto}
.tw-pc-meta-accent{font-weight:600;color:#56aea4;margin-left:8px}
.tw-pc-hint{font-size:11px;color:#9ca3af;margin-top:4px;display:block}

.tw-pc-separator{height:1px;background:#e5e7eb;margin:16px 0}

/* Input + Textarea */
.tw-pc-input,.tw-pc-textarea{width:100%;border:1px solid #e5e7eb;border-radius:8px;padding:10px 14px;font-size:14px;line-height:1.5;color:#1a1a2e;font-family:inherit;transition:border-color .15s;background:#fff;outline:none}
.tw-pc-input:focus,.tw-pc-textarea:focus{border-color:#56aea4}
.tw-pc-input::placeholder,.tw-pc-textarea::placeholder{color:#b0b5c0}
.tw-pc-textarea{resize:vertical;min-height:60px}

/* Progress bars */
.tw-pc-progress-wrap{margin-top:8px}
.tw-pc-progress-bar{height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}
.tw-pc-progress-fill{height:100%;border-radius:3px;width:0;transition:width .2s ease,background-color .2s ease;background:#16a34a}
.tw-pc-progress-fill.tw-pc-bar-green{background:#16a34a}
.tw-pc-progress-fill.tw-pc-bar-orange{background:#ca8a04}
.tw-pc-progress-fill.tw-pc-bar-red{background:#dc2626}

/* ═══ BLOCK 2: SERP Preview ═══ */
.tw-pc-block2{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:20px 24px;margin-bottom:10px}
.tw-pc-serp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}

/* Device toggle tabs — same style as indent tabs */
.tw-pc-device-tabs{display:flex;gap:0;border:1px solid #e5e7eb;border-radius:5px;overflow:hidden}
.tw-pc-dtab{padding:3px 10px;font-size:11px;font-weight:600;border:none;background:#f8f9fa;color:#6b7280;cursor:pointer;transition:all .15s;font-family:inherit;line-height:1.4}
.tw-pc-dtab.tw-pc-dtab-active{background:#56aea4;color:#fff}
.tw-pc-dtab:hover:not(.tw-pc-dtab-active){background:#56aea4;color:#fff;border-color:#56aea4}

/* SERP preview styling — accurate Google */
.tw-pc-serp-preview{background:#fff;padding:16px 0}
.tw-pc-serp-url-line{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.tw-pc-serp-favicon{width:26px;height:26px;border-radius:50%;background:#f1f3f4;flex-shrink:0;border:1px solid #e5e7eb}
.tw-pc-serp-domain{font-size:14px;color:#202124;line-height:1.3}
.tw-pc-serp-title{font-size:20px;line-height:1.3;color:#1a0dab;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-family:arial,sans-serif}
.tw-pc-serp-title:hover{text-decoration:underline}
.tw-pc-serp-desc{font-size:14px;line-height:1.58;color:#545454;font-family:arial,sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ═══ Stats bar ═══ */
.tw-pc-stats{display:flex;gap:16px;padding:8px 0;flex-wrap:wrap}
.tw-pc-stat{font-size:12px;color:#6b7280}
.tw-pc-stat strong{color:#1a1a2e;font-weight:700}

/* ═══ ARTICLE TOGGLE ═══ */
.tw-pc-article-toggle{margin-top:4px;margin-bottom:12px}
.tw-pc-toggle-btn{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;background:#fff;border:1.5px solid #56aea4;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;color:#56aea4;font-family:inherit;transition:all .15s;text-align:left}
.tw-pc-toggle-btn:hover{background:#f0fdf8;border-color:#4a9e94;color:#4a9e94}
.tw-pc-toggle-chevron{transition:transform .25s ease;flex-shrink:0;color:#56aea4}
.tw-pc-toggle-btn:hover .tw-pc-toggle-chevron{color:#4a9e94}
.tw-pc-toggle-btn.tw-pc-toggle-open .tw-pc-toggle-chevron{transform:rotate(180deg)}
.tw-pc-h1{font-size:14px;font-weight:600;margin:0;padding:0;color:inherit;font-family:inherit;line-height:1.4}

/* ═══ Responsive ═══ */
@media(max-width:880px){
  .tw-pc-block1,.tw-pc-block2{padding:16px 18px}
}
@media(max-width:500px){
  .tw-pc-header{flex-direction:column;align-items:stretch}
  .tw-pc-header-actions{flex-wrap:wrap;justify-content:flex-end}
  .tw-pc-section-head{flex-direction:column;align-items:flex-start;gap:4px}
  .tw-pc-meta{margin-left:0}
  .tw-pc-stats{flex-direction:column;gap:4px}
  .tw-pc-serp-title{font-size:18px}
}