.helix-dashboard { padding: 2rem; max-width: 1400px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } .helix-page { padding: 2rem; max-width: 1400px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } .helix-page h1 { font-size: 2rem; margin-bottom: 1rem; color: #0f172a; font-weight: 700; } .helix-page p { color: #64748b; margin-bottom: 2rem; } .helix-dashboard__header { margin-bottom: 3rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 3rem 2rem; margin: -2rem 0 3rem -2rem; border-radius: 0 0 24px 24px; position: relative; overflow: hidden; } .helix-dashboard__header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.3; } .helix-dashboard__header h1 { font-size: 3rem; margin: 0 0 0.5rem 0; color: #ffffff; font-weight: 800; position: relative; z-index: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .helix-dashboard__header p { font-size: 1.25rem; color: rgba(255, 255, 255, 0.9); margin: 0; position: relative; z-index: 1; font-weight: 400; line-height: 3; } .helix-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem; } .helix-loading__spinner { width: 40px; height: 40px; border: 4px solid #f3f4f6; border-top: 4px solid #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 1rem; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .helix-dashboard__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .helix-stats-card { background: #ffffff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); display: flex; align-items: flex-start; gap: 1rem; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid rgba(226, 232, 240, 0.5); } .helix-stats-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .helix-stats-card--blue, .helix-stats-card--green, .helix-stats-card--orange, .helix-stats-card--purple { background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); border-left: 4px solid #667eea; } .helix-stats-card--blue .helix-stats-card__icon svg, .helix-stats-card--green .helix-stats-card__icon svg, .helix-stats-card--orange .helix-stats-card__icon svg, .helix-stats-card--purple .helix-stats-card__icon svg { color: #667eea; } .helix-stats-card__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .helix-stats-card__icon svg { width: 24px; height: 24px; } .helix-stats-card__content { flex: 1; } .helix-stats-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.25rem; } .helix-stats-card__count { font-size: 2rem; font-weight: 700; margin: 0; color: #0f172a; line-height: 1; } .helix-stats-card__title { font-size: 0.875rem; color: #64748b; margin: 0; font-weight: 500; } .helix-stats-card__trend { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 600; color: #059669; background: rgba(16, 185, 129, 0.1); padding: 0.25rem 0.5rem; border-radius: 6px; } .helix-trend-icon { width: 12px !important; height: 12px !important; } .helix-dashboard__content { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1.5rem; } .helix-widget { background: #ffffff; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); overflow: hidden; border: 1px solid rgba(226, 232, 240, 0.5); transition: box-shadow 0.2s ease; } .helix-widget:hover { box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .helix-widget__header { padding: 1.25rem 1.5rem; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%); } .helix-widget__header h2 { margin: 0; font-size: 1.25rem; color: #1e293b; flex-grow: 1; } .helix-widget__link { color: #3b82f6; text-decoration: none; font-size: 0.9rem; } .helix-widget__link:hover { text-decoration: underline; } .helix-widget__content { padding: 1.5rem; } .helix-widget__empty { color: #64748b; font-style: italic; } .helix-posts-list, .helix-comments-list { list-style: none; padding: 0; margin: 0; } .helix-posts-list__item, .helix-comments-list__item { display: flex; justify-content: space-between; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid #f1f5f9; } .helix-posts-list__item:last-child, .helix-comments-list__item:last-child { border-bottom: none; } .helix-posts-list__title a, .helix-comments-list__author { color: #1e293b; text-decoration: none; font-weight: 500; } .helix-posts-list__title a:hover { color: #3b82f6; } .helix-posts-list__date, .helix-comments-list__date { color: #64748b; font-size: 0.9rem; margin: 0.25rem 0 0 0; } .helix-comments-list__excerpt { color: #64748b; margin: 0.25rem 0; font-size: 0.9rem; } .helix-status { padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.8rem; font-weight: 500; } .helix-status--publish { background: #dcfce7; color: #166534; } .helix-status--draft { background: #fef3c7; color: #92400e; } .helix-status--approved { background: #dcfce7; color: #166534; } .helix-status--pending { background: #fef3c7; color: #92400e; } .helix-quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .helix-quick-action { display: flex; flex-direction: column; align-items: center; padding: 1.25rem 1rem; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 10px; text-decoration: none; color: #1e293b; transition: all 0.2s ease; border: 1px solid rgba(226, 232, 240, 0.8); position: relative; overflow: hidden; } .helix-quick-action:hover { background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); color: #0f172a; } .helix-quick-action__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #ffffff; border-radius: 10px; margin-bottom: 0.75rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; } .helix-quick-action:hover .helix-quick-action__icon { background: #3b82f6; transform: scale(1.1); } .helix-quick-action:hover .helix-quick-action__icon svg { color: #ffffff; } .helix-quick-action__icon svg { width: 20px; height: 20px; color: #64748b; transition: color 0.2s ease; } .helix-quick-action__text { font-size: 0.875rem; font-weight: 600; text-align: center; line-height: 1.2; } .helix-news-placeholder { color: #64748b; } .helix-news-item h4 { margin: 0 0 0.5rem 0; color: #1e293b; } .helix-news-item p { margin: 0 0 0.5rem 0; font-size: 0.9rem; } .helix-news-item a { color: #3b82f6; text-decoration: none; font-size: 0.9rem; } .helix-news-item a:hover { text-decoration: underline; }