/* Hide Doubao AI watermark globally */
/* Hide Doubao AI watermark - only specific elements */
[data-custom-element="doubao-watermark"], [data-doubao-translate-traverse-mark] { display: none !important; }

.mobile-bottom-nav { display: none; }

@media (max-width: 768px) {
  /* Hide desktop sidebar */
  aside, .sidebar, [class*="sidebar"], [class*="Sidebar"] {
    display: none !important;
  }

  /* Main content adjustment */
  .main-content, main, [class*="main-content"], #root > div > div:last-child {
    margin-left: 0 !important;
    padding-bottom: 90px !important;
    background: #0F0F12 !important;
  }

  /* Page fade-in */
  body {
    animation: fadeIn 200ms ease-out;
    background: #0F0F12 !important;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Top gradient header area */
  header, .header, [class*="header"], [class*="Header"] {
    background: linear-gradient(180deg, #2A2010 0%, #1A1A1D 100%) !important;
    padding: 20px 16px 30px !important;
    padding-top: max(20px, env(safe-area-inset-top)) !important;
    border-bottom: none !important;
    position: relative;
  }

  /* Wave curve at bottom of header */
  header::after, .header::after, [class*="header"]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 20px;
    background: #0F0F12;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  }

  /* Card styling - rounded 20px, generous padding */
  [class*="card"], [class*="Card"], .ant-card {
    background: #1A1A1E !important;
    border-radius: 20px !important;
    border: none !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.3) !important;
    margin: 0 12px 16px 12px !important;
    padding: 20px !important;
  }

  /* Buttons */
  button, .btn, .ant-btn {
    border-radius: 12px !important;
    min-height: 48px !important;
    transition: transform 100ms ease;
  }
  button:active, .btn:active, .ant-btn:active {
    transform: scale(0.97) !important;
  }

  /* Content spacing */
  .content, .content-area, [class*="content"] {
    padding: 16px 12px !important;
  }

  /* Grid layout for feature entries */
  [class*="grid"], [class*="Grid"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}