/* ToolWowo Modern SEO Preview Styles */
.tw-tool-wrapper { padding: 40px 20px; max-width: 1200px; margin: 0 auto; }
.tw-tool-header { text-align: center; margin-bottom: 50px; }
.tw-tool-header h1 { font-size: 36px; font-weight: 800; color: #1a1a1a; margin-bottom: 12px; }
.tw-tool-header p { font-size: 18px; color: #666; }

/* 响应式网格布局 */
.tw-tool-grid { display: grid; grid-template-columns: 4fr 6fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .tw-tool-grid { grid-template-columns: 1fr; } }

/* 输入区样式 */
.tw-input-section { background: #ffffff; padding: 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; }
.tw-input-group { margin-bottom: 25px; }
.tw-label-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tw-input-group label { font-weight: 600; color: #333; font-size: 14px; margin: 0; }
.tw-char-counter { font-size: 13px; color: #888; font-variant-numeric: tabular-nums; }

.tw-input-wrapper { position: relative; }
.tw-input-wrapper input, .tw-input-wrapper textarea {
    width: 100%; padding: 14px 45px 14px 16px !important; border: 2px solid #eaeaec !important; border-radius: 10px !important;
    font-size: 15px; color: #333 !important; transition: all 0.3s ease; font-family: inherit; background: #fcfcfc;
}
.tw-input-wrapper input:focus, .tw-input-wrapper textarea:focus {
    outline: none; border-color: #0066cc; background: #fff; box-shadow: 0 0 0 4px rgba(0,102,204,0.1);
}

/* 复制按钮及动画 */
.tw-copy-btn {
    position: absolute; right: 10px; top: 4px; background: none; border: none; padding: 6px;
    color: #999; cursor: pointer; transition: all 0.2s; border-radius: 6px;
}
.tw-copy-btn:hover { background: #f0f0f0; color: #333; }
.tw-copy-btn.copied { color: #10b981; }

/* 动态进度条 */
.tw-progress-bar { height: 4px; background: #f0f0f0; border-radius: 2px; margin-top: 8px; overflow: hidden; }
.tw-progress-fill { height: 100%; width: 0%; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease; background-color: #10b981; }
.tw-progress-fill.warning { background-color: #f59e0b; }
.tw-progress-fill.danger { background-color: #ef4444; }

/* 预览区样式 */
.tw-preview-section { background: #f8f9fa; padding: 30px; border-radius: 16px; border: 1px solid #eaeaec; }
.tw-preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.tw-preview-header h3 { margin: 0; font-size: 18px; color: #333; }

/* 切换按钮 */
.tw-device-toggle { display: flex; background: #eaeaec; border-radius: 8px; padding: 4px; }
.tw-device-toggle button {
    background: transparent; border: none; padding: 6px 16px; font-size: 13px; font-weight: 600;
    color: #666; border-radius: 6px; cursor: pointer; transition: all 0.2s;
}
.tw-device-toggle button.active { background: #fff; color: #0066cc; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* Google 模拟器及变形动画 */
.tw-preview-canvas { display: flex; justify-content: center; transition: all 0.5s ease; }
.tw-google-snippet {
    background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    font-family: arial, sans-serif; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden; width: 100%; max-width: 650px; margin: 0 auto;
}
.tw-google-snippet.mobile-mode { width: 375px; border-radius: 24px; border: 8px solid #333; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

.tw-snippet-top { display: flex; align-items: center; margin-bottom: 8px; }
.tw-snippet-favicon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background-image: url(https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://www.example.com&size=16); background-repeat: no-repeat; background-position: center;}
.tw-snippet-url { font-size: 14px; color: #202124; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tw-domain { color: #202124; }
.tw-breadcrumb { color: #5f6368; }
.tw-breadcrumb::before { content: " › "; }
.tw-breadcrumb:empty::before { content: ""; }

.tw-snippet-title { color: #1a0dab; font-size: 20px; line-height: 1.3; margin-bottom: 4px; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s; }
.tw-snippet-title:hover { text-decoration: underline; }
.mobile-mode .tw-snippet-title { font-size: 18px; -webkit-line-clamp: 2; } /* 移动端标题允许两行 */

.tw-snippet-desc { color: #4d5156; font-size: 14px; line-height: 1.58; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.tw-seo-content { margin-top: 60px; }
/* URL 输入框专属左侧图标样式 */
.tw-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    display: flex;
    align-items: center;
    pointer-events: none; /* 防止图标阻挡鼠标点击输入框 */
}

/* 针对带有左侧图标的 URL 输入框，调整内边距 */
.tw-input-wrapper input.tw-url-input {
    padding-left: 42px !important; 
    padding-right: 16px !important; /* 右侧不需要留复制按钮的空位 */
}