.tbr-wrapper {
    max-width: 860px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1f2328;
    line-height: 1.6;
}

.tbr-seo-header { margin-bottom: 24px; }
.tbr-title { font-size: 1.8rem; font-weight: 700; margin: 0 0 10px; }
.tbr-meta-desc { font-size: 1.05rem; color: #444; margin: 0 0 10px; }
.tbr-intro { font-size: 1rem; color: #555; margin: 0; }

.tbr-tool {
    border: 1px solid #e2e5e9;
    border-radius: 12px;
    padding: 24px;
    background: #fafbfc;
    margin-bottom: 32px;
}

.tbr-upload-area {
    border: 2px dashed #c7ccd1;
    border-radius: 10px;
    padding: 48px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    background: #fff;
}
.tbr-upload-area.tbr-dragover { border-color: #4f7cff; background: #f3f6ff; }
.tbr-upload-inner { color: #55606b; }
.tbr-upload-inner svg { color: #8b95a1; margin-bottom: 8px; }
.tbr-upload-inner p { margin: 6px 0 2px; font-size: 1rem; }
.tbr-upload-inner span { font-size: .85rem; color: #8b95a1; }

.tbr-editor { display: flex; flex-wrap: wrap; gap: 24px; }

.tbr-canvas-wrap { flex: 1 1 380px; min-width: 260px; }

.tbr-canvas-checker {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e5e9;
    background-image:
        linear-gradient(45deg, #ddd 25%, transparent 25%),
        linear-gradient(-45deg, #ddd 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ddd 75%),
        linear-gradient(-45deg, transparent 75%, #ddd 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
#tbrCanvas { max-width: 100%; display: block; cursor: crosshair; touch-action: none; }

.tbr-hint { font-size: .85rem; color: #6b7280; margin: 8px 2px 0; }

.tbr-controls { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 18px; }

.tbr-control-group { display: flex; flex-direction: column; gap: 6px; }
.tbr-control-group label { font-size: .9rem; font-weight: 600; }
.tbr-control-group input[type="range"] { width: 100%; }
.tbr-control-note { font-size: .78rem; color: #8b95a1; }

.tbr-bg-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.tbr-bg-btn {
    border: 1px solid #d7dbe0;
    background: #fff;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: .85rem;
    cursor: pointer;
    color: #33383f;
}
.tbr-bg-btn.active { border-color: #4f7cff; background: #eef2ff; color: #33389e; font-weight: 600; }

#tbrColorPicker { width: 100%; height: 38px; border: 1px solid #d7dbe0; border-radius: 6px; padding: 2px; }

.tbr-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.tbr-btn {
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s ease;
}
.tbr-btn:hover { opacity: .88; }
.tbr-btn-primary { background: #4f7cff; color: #fff; flex: 1; }
.tbr-btn-secondary { background: #eceff2; color: #33383f; }
.tbr-btn-text { background: transparent; color: #4f7cff; padding: 6px 0; text-align: left; }

.tbr-how-to, .tbr-faq { margin-top: 32px; }
.tbr-how-to h2, .tbr-faq h2 { font-size: 1.3rem; margin-bottom: 12px; }
.tbr-how-to ol { padding-left: 22px; }
.tbr-how-to li { margin-bottom: 8px; }

.tbr-faq-item { margin-bottom: 16px; }
.tbr-faq-item h3 { font-size: 1rem; margin: 0 0 4px; }
.tbr-faq-item p { margin: 0; color: #555; }

@media (max-width: 600px) {
    .tbr-title { font-size: 1.4rem; }
    .tbr-tool { padding: 16px; }
    .tbr-upload-area { padding: 32px 14px; }
}