/* ============================================
   AIHub ΓÇö Phone CSS (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {
  :root {
    --section-padding: 3rem;
  }

  .container {
    padding: 0 1rem;
  }

  /* Navbar */
  .navbar-inner {
    padding: 0 1rem;
  }

  .nav-logo {
    font-size: 1.05rem;
  }

  .nav-logo-mark {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }

  .nav-actions .btn {
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
  }

  .nav-links.open {
    padding: 1rem;
    gap: 1rem;
  }

  .nav-links a {
    font-size: 0.85rem;
  }

  /* Hero */
  .hero {
    padding: 2rem 1rem 2.5rem;
    min-height: 95vh;
  }

  .hero h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .hero-badge {
    font-size: 0.65rem;
    padding: 0.3rem 0.75rem;
  }

  .hero-cta {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }

  .hero-cta .btn {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
  }

  /* Section headers */
  .section-header h2 {
    font-size: 1.5rem;
  }

  .section-header p {
    font-size: 0.85rem;
  }

  .section-header {
    margin-bottom: 2rem;
  }

  .section-tag {
    font-size: 0.65rem;
    padding: 0.3rem 0.75rem;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .stat-item {
    padding: 1.25rem 0.75rem;
  }

  .stat-number {
    font-size: 1.75rem;
  }

  .stat-label {
    font-size: 0.65rem;
  }

  /* Features */
  .features-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .feature-card {
    padding: 1.25rem;
  }

  .feature-card h3 {
    font-size: 1.05rem;
  }

  .feature-card p {
    font-size: 0.85rem;
  }

  .feature-card .card-icon {
    width: 40px;
    height: 40px;
  }

  /* Showcase */
  .showcase {
    gap: 2rem;
  }

  .showcase-content h2 {
    font-size: 1.4rem;
  }

  .showcase-content p {
    font-size: 0.85rem;
  }

  .showcase-list li {
    font-size: 0.85rem;
  }

  .showcase-panel {
    padding: 1rem;
  }

  .showcase-code {
    font-size: 0.75rem;
  }

  /* CTA */
  .cta-box {
    padding: 2rem 1.25rem;
    border-radius: 1rem;
  }

  .cta-box h2 {
    font-size: 1.5rem;
  }

  .cta-box p {
    font-size: 0.9rem;
  }

  .cta-box .hero-cta .btn {
    width: 100%;
  }

  /* Footer */
  .footer {
    padding: 2rem 0 1.5rem;
  }

  .footer-links {
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .footer-col h4 {
    font-size: 0.7rem;
  }

  .footer-col a {
    font-size: 0.8rem;
  }

  .footer-bottom {
    font-size: 0.75rem;
    gap: 0.75rem;
  }

  .footer-social a {
    width: 32px;
    height: 32px;
  }

  /* Logo strip */
  .logo-strip {
    gap: 1.5rem;
  }

  .logo-strip span {
    font-size: 0.9rem;
  }

  /* Orbs hidden on very small screens for performance */
  .orb-1, .orb-2, .orb-3 {
    display: none;
  }

  /* Buttons */
  .btn {
    padding: 0.7rem 1.25rem;
    font-size: 0.85rem;
  }

  /* Cards */
  .featured-card,
  .card {
    padding: 1.25rem;
    border-radius: 0.75rem;
  }

  /* Tools grid */
  .tools-grid,
  #tools-list {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Use cases grid */
  .usecase-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* How visual grid */
  .how-visual-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .tool-card {
    padding: 1rem;
  }

  .tool-card h3 {
    font-size: 0.8rem;
  }

  .tool-card p {
    font-size: 0.72rem;
  }

  .tool-card .tool-icon {
    width: 30px;
    height: 30px;
  }

  /* Tool categories */
  .tool-categories {
    gap: 0.5rem;
  }

  .tool-category {
    font-size: 0.65rem;
    padding: 0.4rem 0.85rem;
  }

  /* Pricing */
  .pricing-card {
    padding: 1.5rem 1.25rem;
  }

  .pricing-card .plan-price {
    font-size: 2rem;
  }

  /* Differentiators */
  .diff-strip {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .diff-item {
    padding: 1.25rem 0.75rem;
  }

  .diff-item h3 {
    font-size: 0.9rem;
  }

  .diff-item p {
    font-size: 0.8rem;
  }

  /* Tool preview */
  .tool-preview-body {
    padding: 1rem;
  }

  .tool-preview-input,
  .tool-preview-output {
    font-size: 0.75rem;
    padding: 0.7rem 0.85rem;
  }

  .tool-preview-actions {
    padding: 0 1rem 1rem;
  }

  .tool-preview-actions button {
    font-size: 0.7rem;
    padding: 0.35rem 0.7rem;
  }

  /* Page header */
  .page-header {
    padding: 2rem 1rem 2rem;
    min-height: 30vh;
  }

  .page-header-content h1 {
    font-size: 1.5rem;
  }

  .page-header p {
    font-size: 0.9rem !important;
  }

  /* Steps grid */
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .step-card {
    padding: 1.5rem 1.25rem;
  }

  .step-number {
    font-size: 1.75rem;
  }

  .step-card h3 {
    font-size: 1rem;
  }

  .step-card p {
    font-size: 0.8rem;
  }

  /* Comparison table */
  .comparison-table {
    overflow-x: auto;
    border-radius: 0.75rem;
  }

  .comparison-row {
    min-width: 500px;
  }

  .comparison-cell {
    font-size: 0.72rem;
    padding: 0.7rem 0.5rem;
  }

  .comparison-cell:first-child {
    font-size: 0.72rem;
  }

  /* FAQ */
  .faq-section-title {
    font-size: 1.05rem;
  }

  .faq-question {
    font-size: 0.82rem;
    padding: 0.9rem 1rem;
  }

  .faq-answer {
    padding: 0 1rem;
  }

  .faq-answer p {
    font-size: 0.78rem;
  }

  .faq-chevron {
    width: 16px;
    height: 16px;
  }

  /* ============================================
     LEGAL PAGES (Privacy & Terms)
     ============================================ */

  .legal-hero {
    padding: 2rem 0 2.5rem;
  }

  .legal-hero h1 {
    font-size: 1.8rem;
    line-height: 1.2;
  }

  .legal-hero-subtitle {
    font-size: 0.88rem;
    line-height: 1.6;
  }

  .legal-meta {
    gap: 0.6rem;
  }

  .legal-meta-item {
    font-size: 0.65rem;
    padding: 0.3rem 0.7rem;
  }

  .legal-body-section {
    padding: 1.5rem 0 3rem;
  }

  /* Stack TOC above content on mobile */
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .legal-toc {
    position: static;
  }

  .legal-toc-inner {
    padding: 1rem;
    border-radius: 0.75rem;
  }

  .legal-toc h4 {
    font-size: 0.65rem;
  }

  .legal-toc a {
    font-size: 0.78rem;
    padding: 0.4rem 0.5rem;
  }

  .legal-content {
    gap: 2rem;
  }

  .legal-article h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
  }

  .legal-article h3 {
    font-size: 1rem;
    margin: 1.25rem 0 0.5rem;
  }

  .legal-article p {
    font-size: 0.85rem;
    line-height: 1.65;
    margin-bottom: 0.85rem;
  }

  .legal-list {
    gap: 0.6rem;
  }

  .legal-list li {
    font-size: 0.83rem;
    line-height: 1.55;
    padding-left: 1.2rem;
  }

  .legal-callout {
    padding: 0.85rem 1rem;
    margin: 1rem 0;
  }

  .legal-callout span {
    font-size: 0.82rem;
  }

  .legal-table {
    font-size: 0.75rem;
    min-width: 320px;
  }

  .legal-table th {
    font-size: 0.62rem;
    padding: 0.5rem 0.6rem;
  }

  .legal-table td {
    padding: 0.5rem 0.6rem;
  }

  .legal-table td code {
    font-size: 0.72rem;
  }

  .legal-contact-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .legal-contact-card {
    padding: 1rem;
    gap: 0.75rem;
  }

  .legal-contact-icon {
    width: 38px;
    height: 38px;
  }

  /* ============================================
     404 PAGE
     ============================================ */

  .notfound-section {
    padding: 2rem 1rem 2.5rem;
    min-height: 95vh;
  }

  /* Hide orbs on very small screens for performance */
  .notfound-orb-1,
  .notfound-orb-2,
  .notfound-orb-3 {
    display: none;
  }

  .notfound-illustration {
    margin-bottom: 1rem;
  }

  .notfound-robot {
    width: 140px;
    height: 140px;
  }

  .notfound-number {
    gap: 0.1rem;
    margin-bottom: 1rem;
  }

  .notfound-digit {
    font-size: 4.5rem;
  }

  .notfound-zero-svg {
    width: 48px;
    height: 58px;
  }

  .notfound-text h1 {
    font-size: 1.4rem;
    line-height: 1.2;
  }

  .notfound-text p {
    font-size: 0.85rem;
    line-height: 1.6;
  }

  .notfound-badge {
    font-size: 0.65rem;
    padding: 0.3rem 0.75rem;
    margin-bottom: 1rem;
  }

  .notfound-nav {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .notfound-nav-card {
    padding: 1rem;
    gap: 0.75rem;
  }

  .notfound-nav-icon {
    width: 38px;
    height: 38px;
  }

  .notfound-nav-title {
    font-size: 0.88rem;
  }

  .notfound-nav-desc {
    font-size: 0.72rem;
  }

  .notfound-cta {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
  }

  /* Tool pages */
  .tool-interface-section {
    padding: 1.5rem 0;
    min-height: 60px;
  }

  .tool-hero-section {
    padding: 1.5rem 1rem 2.5rem;
    min-height: auto;
  }

  .tool-hero-content h1 {
    font-size: 1.6rem;
  }

  .tool-hero-tagline {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .tool-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 0.875rem;
  }

  .tool-hero-icon svg {
    width: 32px;
    height: 32px;
  }

  .tool-hero-breadcrumb {
    font-size: 0.65rem;
    gap: 0.35rem;
  }

  .tool-hero-cta {
    flex-direction: column;
    gap: 0.75rem;
  }

  .tool-hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  .tool-hero-badge {
    gap: 0.5rem;
  }

  .tool-hero-category {
    font-size: 0.6rem;
    padding: 0.25rem 0.6rem;
  }

  .tool-hero-stats {
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .tool-hero-stat-value {
    font-size: 1.1rem;
  }

  .tool-hero-stat-label {
    font-size: 0.58rem;
  }

  .tool-section {
    padding: 2.5rem 0;
  }

  .tool-section .section-header h2 {
    font-size: 1.4rem;
  }

  .tool-section .section-header p {
    font-size: 0.82rem;
  }

  .tool-features-bento {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .tool-feature-bento-card {
    padding: 1.25rem 1rem;
    gap: 1rem;
  }

  .tool-feature-bento-icon {
    width: 44px;
    height: 44px;
  }

  .tool-feature-bento-icon svg {
    width: 22px;
    height: 22px;
  }

  .tool-feature-bento-body h3 {
    font-size: 0.95rem;
  }

  .tool-feature-bento-body p {
    font-size: 0.8rem;
  }

  .tool-timeline {
    gap: 1rem;
  }

  .tool-timeline-item {
    gap: 0.75rem;
  }

  .tool-timeline-icon {
    width: 44px;
    height: 44px;
  }

  .tool-timeline-icon svg {
    width: 18px;
    height: 18px;
  }

  .tool-timeline-card {
    padding: 1rem 0.85rem;
  }

  .tool-timeline-card h3 {
    font-size: 0.9rem;
  }

  .tool-timeline-card p {
    font-size: 0.78rem;
  }

  .tool-usecases-split {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .tool-usecase-split-body {
    padding: 1.25rem 1rem;
    gap: 1rem;
  }

  .tool-usecase-split-icon {
    width: 40px;
    height: 40px;
  }

  .tool-usecase-split-icon svg {
    width: 18px;
    height: 18px;
  }

  .tool-usecase-split-body h3 {
    font-size: 0.95rem;
  }

  .tool-usecase-split-body p {
    font-size: 0.8rem;
  }

  .tool-stats-bar {
    flex-direction: column;
    gap: 0;
  }

  .tool-stat-item {
    flex: 1 1 100%;
    border-right: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    padding: 1rem;
  }

  .tool-stat-item:last-child {
    border-bottom: none;
  }

  .tool-stat-value {
    font-size: 1.4rem;
  }

  .tool-stat-label {
    font-size: 0.62rem;
  }

  .tool-benefits-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .tool-benefit-card {
    padding: 1.25rem 1rem;
  }

  .tool-benefit-card h3 {
    font-size: 0.88rem;
  }

  .tool-benefit-card p {
    font-size: 0.78rem;
  }

  .tool-benefit-card-check {
    width: 24px;
    height: 24px;
  }

  .tool-benefit-card-check svg {
    width: 14px;
    height: 14px;
  }

  .tool-example-layout {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .tool-example-panel-header {
    padding: 0.75rem 1rem;
  }

  .tool-example-panel-body {
    padding: 1rem;
    gap: 0.75rem;
  }

  .tool-example-input-text {
    font-size: 0.78rem;
    padding: 0.6rem 0.85rem;
  }

  .tool-example-output-text {
    font-size: 0.8rem;
    padding: 0.6rem 0.85rem;
  }

  .tool-tips-sidebar {
    padding: 1.25rem 1rem;
  }

  .tool-tips-title {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .tool-tip-item {
    padding: 0.65rem 0;
    gap: 0.6rem;
  }

  .tool-tip-item strong {
    font-size: 0.8rem;
  }

  .tool-tip-item p {
    font-size: 0.75rem;
  }

  .tool-faq-related-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .tool-faq-list {
    gap: 0.5rem;
  }

  .faq-question {
    font-size: 0.82rem;
    padding: 0.85rem 1rem;
    gap: 0.5rem;
  }

  .faq-answer p {
    font-size: 0.78rem;
  }

  .tool-related-card {
    padding: 0.85rem 1rem;
    font-size: 0.8rem;
  }

  .tool-related-icon {
    width: 32px;
    height: 32px;
  }

  .tool-related-icon svg {
    width: 18px;
    height: 18px;
  }

  .cta-box {
    padding: 2rem 1.25rem;
  }

  .cta-box h2 {
    font-size: 1.4rem;
  }

  .cta-box p {
    font-size: 0.85rem;
  }

  /* ============================================
     TOOL INTERFACE ΓÇö Responsive (max-width: 358px)
     ============================================ */

  .tool-interface-section {
    padding: 1.5rem 0 2rem;
  }

  .tool-ui {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .tool-ui-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.78rem;
  }

  .tool-ui-credit-counter {
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
  }

  .tool-ui-panel {
    padding: 1rem;
    border-radius: 0.75rem;
  }

  .tool-ui-panel-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
  }

  .tool-ui-panel-header h3 {
    font-size: 0.9rem;
  }

  .tool-ui-panel-header-icon {
    width: 28px;
    height: 28px;
  }

  .tool-ui-field {
    margin-bottom: 0.9rem;
  }

  .tool-ui-label {
    font-size: 0.75rem;
  }

  .tool-ui-label-hint {
    font-size: 0.65rem;
  }

  .tool-ui-input,
  .tool-ui-textarea,
  .tool-ui-select {
    font-size: 0.82rem;
    padding: 0.6rem 0.8rem;
  }

  .tool-ui-textarea {
    min-height: 70px;
  }

  .tool-ui-pills {
    gap: 0.3rem;
  }

  .tool-ui-pill {
    font-size: 0.72rem;
    padding: 0.4rem 0.7rem;
  }

  .tool-ui-toggle-row {
    padding: 0.5rem 0;
  }

  .tool-ui-toggle-label {
    font-size: 0.78rem;
  }

  .tool-ui-toggle {
    width: 36px;
    height: 20px;
  }

  .tool-ui-toggle-thumb {
    width: 14px;
    height: 14px;
  }

  .tool-ui-toggle.active .tool-ui-toggle-thumb {
    transform: translateX(16px);
  }

  .tool-ui-bulk-placeholder {
    font-size: 0.72rem;
    padding: 0.6rem 0.8rem;
  }

  .tool-ui-generate-btn {
    padding: 0.8rem 1.25rem;
    font-size: 0.88rem;
  }

  .tool-ui-output-empty {
    padding: 2rem 1rem;
  }

  .tool-ui-output-empty-icon {
    width: 52px;
    height: 52px;
  }

  .tool-ui-output-empty-icon svg {
    width: 26px;
    height: 26px;
  }

  .tool-ui-output-empty h4 {
    font-size: 0.88rem;
  }

  .tool-ui-output-empty p {
    font-size: 0.75rem;
  }

  .tool-ui-variant {
    padding: 1rem;
    border-radius: 0.6rem;
  }

  .tool-ui-variant-content {
    font-size: 0.82rem;
  }

  .tool-ui-variant-bullets li {
    font-size: 0.76rem;
  }

  .tool-ui-seo-keyword {
    font-size: 0.68rem;
    padding: 0.25rem 0.55rem;
  }

  .tool-ui-counter-text {
    font-size: 0.68rem;
  }

  .tool-ui-action-btn {
    font-size: 0.7rem;
    padding: 0.35rem 0.65rem;
  }

  .tool-ui-platform-preview {
    padding: 0.75rem;
  }

  .tool-ui-amazon-preview,
  .tool-ui-shopify-preview,
  .tool-ui-etsy-preview,
  .tool-ui-ebay-preview {
    padding: 0.6rem;
  }

  .tool-ui-amazon-preview .product-title,
  .tool-ui-shopify-preview .product-title {
    font-size: 0.85rem;
  }

  .tool-ui-amazon-preview .product-desc,
  .tool-ui-shopify-preview .product-desc,
  .tool-ui-etsy-preview .product-desc,
  .tool-ui-ebay-preview .product-desc {
    font-size: 0.75rem;
  }

  .tool-ui-google-ad {
    padding: 0.7rem 0.85rem;
  }

  .tool-ui-google-ad .ad-headline,
  .tool-ui-google-ad .ad-headline-2 {
    font-size: 0.9rem;
  }

  .tool-ui-google-ad .ad-desc {
    font-size: 0.75rem;
  }

  .tool-ui-fb-ad-avatar,
  .tool-ui-linkedin-ad-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.78rem;
  }

  .tool-ui-fb-ad-body {
    font-size: 0.8rem;
  }

  .tool-ui-fb-ad-media {
    height: 90px;
  }

  .tool-ui-linkedin-ad-body {
    font-size: 0.8rem;
  }

  .tool-ui-perf-prediction-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
  }

  .tool-ui-perf-metric {
    padding: 0.5rem 0.3rem;
  }

  .tool-ui-perf-metric-value {
    font-size: 0.82rem;
  }

  .tool-ui-perf-metric-label {
    font-size: 0.55rem;
  }

  .tool-ui-howto {
    padding: 1rem;
    margin-top: 1.5rem;
  }

  .tool-ui-howto-steps {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .tool-ui-howto-step-num {
    width: 24px;
    height: 24px;
    font-size: 0.65rem;
  }

  .tool-ui-howto-step-body h4 {
    font-size: 0.78rem;
  }

  .tool-ui-howto-step-body p {
    font-size: 0.72rem;
  }

  .tool-ui-faq-question {
    font-size: 0.76rem;
    padding: 0.75rem 0.85rem;
  }

  .tool-ui-faq-answer p {
    font-size: 0.73rem;
    padding: 0 0.85rem 0.75rem;
  }

  /* Tool UI Header Bar */
  .tool-ui-header-bar {
    padding: 0.7rem 1rem;
    margin: -1rem -1rem 1rem;
  }

  .tool-ui-header-icon {
    width: 28px;
    height: 28px;
  }

  .tool-ui-header-name {
    font-size: 0.82rem;
  }

  .tool-ui-header-badge {
    font-size: 0.52rem;
    padding: 0.15rem 0.45rem;
  }

  .tool-ui-header-model {
    font-size: 0.6rem;
    padding: 0.2rem 0.5rem;
  }

  /* Free Note */
  .tool-ui-free-note {
    font-size: 0.65rem;
    padding: 0.6rem 1rem;
    margin: 0 -1rem -1rem;
  }

  /* Swap Button */
  .tool-ui-swap-btn {
    width: 36px;
    height: 36px;
  }

  /* Locked Overlay */
  .tool-ui-locked-overlay {
    padding: 1.5rem 1rem;
    gap: 1rem;
  }

  .tool-ui-locked-icon {
    width: 52px;
    height: 52px;
  }

  .tool-ui-locked-title {
    font-size: 1.15rem;
  }

  .tool-ui-locked-desc {
    font-size: 0.78rem;
  }

  .tool-ui-pricing-card {
    padding: 0.7rem 0.85rem;
    min-width: 75px;
  }

  .tool-ui-pricing-card .price {
    font-size: 1.1rem;
  }

  .tool-ui-locked-cta {
    padding: 0.7rem 1.4rem;
    font-size: 0.82rem;
  }

  /* Compact Features */
  .tool-features-compact {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Chips */
  .tool-ui-chip {
    font-size: 0.65rem;
    padding: 0.4rem 0.75rem;
  }

  /* Single Column Layout */
  .tool-ui-single {
    gap: 1rem;
  }

  /* New tool-ui responsive styles */
  .tool-ui {
    border-radius: 1rem;
  }

  .tool-ui-header {
    padding: 0.7rem 0.85rem;
    gap: 0.5rem;
  }

  .tool-ui-header-title {
    font-size: 0.82rem;
  }

  .tool-ui-header-badge {
    font-size: 0.52rem;
    padding: 0.15rem 0.45rem;
  }

  .tool-ui-model-select {
    font-size: 0.6rem;
    padding: 0.2rem 0.5rem;
  }

  .tool-ui-body {
    padding: 1rem 0.85rem;
    gap: 1rem;
  }

  .tool-ui-label {
    font-size: 0.65rem;
  }

  .tool-ui-input,
  .tool-ui-textarea,
  .tool-ui-select {
    font-size: 0.8rem;
    padding: 0.6rem 0.75rem;
  }

  .tool-ui-textarea {
    min-height: 65px;
  }

  .tool-ui-chip {
    font-size: 0.65rem;
    padding: 0.35rem 0.7rem;
  }

  .tool-ui-counter {
    font-size: 0.6rem;
    gap: 0.5rem;
  }

  .tool-ui-actions {
    padding: 0 0.85rem 1rem;
    gap: 0.4rem;
  }

  .tool-ui-btn {
    font-size: 0.72rem;
    padding: 0.45rem 0.8rem;
  }

  .tool-ui-btn-primary {
    padding: 0.5rem 1.1rem;
    font-size: 0.78rem;
  }

  .tool-ui-output {
    padding: 0 0.85rem 1rem;
    gap: 0.6rem;
  }

  .tool-ui-output-card {
    padding: 0.75rem 0.85rem;
    font-size: 0.8rem;
  }

  .tool-ui-output-card .output-copy-btn {
    opacity: 1;
    width: 26px;
    height: 26px;
  }

  .tool-ui-tabs {
    padding: 0 0.85rem;
    gap: 0.15rem;
  }

  .tool-ui-tab {
    font-size: 0.65rem;
    padding: 0.5rem 0.65rem;
  }

  .tool-ui-tab-content {
    padding: 0.85rem;
  }

  .tool-ui-footer {
    padding: 0.55rem 0.85rem;
    font-size: 0.55rem;
  }

  .tool-ui-serp {
    padding: 0.75rem 0.85rem;
  }

  .tool-ui-serp-title {
    font-size: 0.95rem;
  }

  .tool-ui-serp-desc {
    font-size: 0.72rem;
  }

  .tool-ui-serp-url {
    font-size: 0.68rem;
  }

  .tool-ui-faq-item {
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.4rem;
  }

  .tool-ui-faq-q {
    font-size: 0.8rem;
  }

  .tool-ui-faq-a {
    font-size: 0.75rem;
  }

  .tool-ui-name-card {
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.35rem;
  }

  .tool-ui-name-text {
    font-size: 0.85rem;
  }

  .tool-ui-name-btn {
    width: 24px;
    height: 24px;
  }

  .tool-ui-jsonld {
    font-size: 0.65rem;
    padding: 0.75rem 0.85rem;
    max-height: 200px;
  }

  .tool-ui-empty {
    padding: 1.5rem 0.75rem;
    font-size: 0.78rem;
  }

  .tool-ui-hint {
    font-size: 0.68rem;
  }
}