/* Scoped YouTube Tools Platform Suite & Responsive Tool Styles */

.yt-hub-suite {
 font-family: inherit;
}

.yt-hub-card-icon {
 color: #ff0000;
}

/* Custom accents for YouTube brand theme */
.card-badge.yt-badge {
 background: #ff0000;
 color: #ffffff;
}

/* Responsive 2-Column Tool Grid */
.yt-tool-grid {
 display: grid;
 grid-template-columns: 1fr 340px;
 gap: 24px;
 align-items: start;
}

@media (max-width: 1023px) {
 .yt-tool-grid {
 grid-template-columns: 1fr;
 gap: 20px;
 }
}

/* Advanced Settings Accordion Drawer (Rule 3 Compliance) */
.yt-advanced-settings {
 border: 1px solid #e2eaf4;
 border-radius: 12px;
 background: #f8fafc;
 margin-top: 8px;
 overflow: hidden;
 transition: all 0.25s ease;
}

.yt-advanced-summary {
 padding: 12px 16px;
 font-size: 13px;
 font-weight: 700;
 color: #0f2d59;
 cursor: pointer;
 background: #ffffff;
 display: flex;
 align-items: center;
 justify-content: space-between;
 user-select: none;
 border-bottom: 1px solid transparent;
 transition: background 0.15s ease, border-color 0.15s ease;
}

.yt-advanced-summary:hover {
 background: #f1f5f9;
}

.yt-advanced-settings[open] .yt-advanced-summary {
 border-bottom-color: #e2eaf4;
 background: #edf2f7;
}

.yt-advanced-summary::-webkit-details-marker,
.yt-advanced-summary::marker {
 display: none;
 content: "";
}

.yt-advanced-icon {
 font-size: 12px;
 transition: transform 0.2s ease;
 color: #1e5ccb;
}

.yt-advanced-settings[open] .yt-advanced-icon {
 transform: rotate(180deg);
}

.yt-advanced-content {
 padding: 16px;
 display: flex;
 flex-direction: column;
 gap: 16px;
}

/* Touch & Mobile Viewport Enhancements (<768px) */
@media (max-width: 767px) {
 .yt-tool-card {
 padding: 16px !important;
 border-radius: 12px !important;
 }

 .yt-editor-panel input[type="text"],
 .yt-editor-panel select,
 .yt-editor-panel button {
 min-height: 44px;
 font-size: 14px !important;
 }
}

/* Homepage-Matched Related Tools Grid & Card Architecture */
.related-tools-section {
 margin: 36px 0 28px;
}

.related-tools-section .tools-grid {
 display: grid;
 gap: 18px;
 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

@media (min-width: 1024px) {
 .related-tools-section .tools-grid {
 grid-template-columns: repeat(4, 1fr);
 }
}

.related-tools-section .tool-card {
 background: #ffffff;
 border: 1px solid #e5e7eb;
 border-radius: 12px;
 padding: 16px;
 text-decoration: none;
 display: flex;
 flex-direction: column;
 gap: 8px;
 transition: all 0.2s ease;
 overflow: hidden;
 height: 100%;
 box-sizing: border-box;
}

.related-tools-section .tool-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 10px 25px rgba(0,0,0,0.08);
 border-color: #1a73e8;
}

.related-tools-section .tool-card-header {
 display: flex;
 align-items: center;
 gap: 10px;
}

.related-tools-section .tool-icon-wrapper,
.related-tools-section .tool-icon,
.related-tools-section .tool-card svg {
 width: 24px !important;
 height: 24px !important;
 max-width: 24px !important;
 max-height: 24px !important;
 color: #1a73e8;
 flex-shrink: 0;
 stroke-width: 2;
}

.related-tools-section .tool-name {
 font-size: 15px;
 font-weight: 600;
 color: #1e3a5f;
 margin: 0;
 line-height: 1.3;
}

.related-tools-section .tool-desc {
 font-size: 13px;
 color: #64748b;
 margin: 0;
 line-height: 1.4;
}