body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #fbfcfe; color: #222; }
header { background: #222; color: #fff; padding: 12px 20px; }
header .brand { display: inline-flex; align-items: center; gap: 10px; color: white; text-decoration: none; font-weight: 600; letter-spacing: 0.4px; }
header .logo { width: 40px; height: 40px; display: block; }
header .brand-text { font-size: 20px; }
main { padding: 20px; }
.grid { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.grid li { background: #f7f9fc; padding: 12px; border-radius: 8px; width: 160px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.grid img { max-width: 100%; height: 64px; object-fit: contain; }
.grid .blurb { margin: 10px 0 0 0; font-size: 12px; color: #555; line-height: 1.45; text-align: left; }
.intro { margin: 0 0 20px 0; font-size: 15px; color: #444; max-width: 800px; line-height: 1.6; }
.intro.ai-generated, .blurb.ai-generated { position: relative; background: #f4f8ff; border-left: 3px solid #3a7bd5; border-radius: 6px; padding: 10px 12px; }
.intro.ai-generated::after, .blurb.ai-generated::after { content: "AI"; position: absolute; top: -8px; right: 10px; font-size: 10px; letter-spacing: 0.05em; background: #3a7bd5; color: #fff; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.intro.ai-generated:hover::after, .blurb.ai-generated:hover::after { opacity: 1; }
.intro.ai-generated { padding-top: 12px; }
.blurb.ai-generated { font-size: 12px; line-height: 1.5; margin-top: 12px; }
.manuals { list-style: none; padding: 0; }
.manuals li { padding: 12px 0; border-bottom: 1px solid #e6ebf2; }
.manuals a { display: flex; align-items: center; text-decoration: none; color: inherit; border-radius: 6px; padding: 6px; }
.manuals a:hover { background: #f4f8ff; }
.manuals .thumb { width: 100px; height: 140px; object-fit: contain; margin-right: 12px; border: 1px solid #e6ebf2; border-radius: 4px; background: #fff; }
.manuals .title { display: block; color: #0b63c5; font-weight: 600; }
.filename { color: #666; font-size: 12px; display: block; margin-top: 4px; }
.breadcrumbs { margin-bottom: 12px; color: #555; }
.context { border: 1px solid #e6ebf2; background: #fafcff; padding: 12px 14px; border-radius: 8px; margin: 12px 0 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.context h3 { margin: 6px 0 4px 0; font-size: 15px; color: #2c3e50; }
.context .intro { margin: 4px 0 10px 0; }
#adsense { margin: 20px; min-height: 90px; background: #fafafa; border: 1px dashed #ddd; border-radius: 6px; }
footer { padding: 12px 20px; color: #666; font-size: 13px; }

/* Form styles for submissions */
.submission-form { max-width: 600px; margin: 2rem auto; }
.form-section { margin-bottom: 2rem; padding: 1.5rem; background: #f9f9f9; border-radius: 6px; }
.form-section h2 { margin-top: 0; margin-bottom: 1rem; font-size: 1.2rem; color: #333; }
.submission-form label { display: block; margin-bottom: 0.4rem; font-weight: 600; color: #444; }
.submission-form input[type="text"],
.submission-form input[type="url"],
.submission-form input[type="file"] { display: block; width: 100%; padding: 0.6rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; font-family: inherit; }
.submission-form input[type="file"] { padding: 0.4rem; }
.help-text { font-size: 0.85rem; color: #666; margin: -0.5rem 0 1rem 0; }
.or-divider { text-align: center; margin: 1.5rem 0; color: #999; font-weight: 600; }
.form-actions { display: flex; gap: 1rem; align-items: center; margin-top: 2rem; }
.submit-btn { padding: 0.8rem 2rem; background: #0066cc; color: white; border: none; border-radius: 4px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.submit-btn:hover { background: #0052a3; }
.cancel-link { color: #666; text-decoration: none; }
.cancel-link:hover { text-decoration: underline; }
.success-message { max-width: 600px; margin: 2rem auto; padding: 2rem; background: #e6f7e6; border: 2px solid #4caf50; border-radius: 6px; text-align: center; }
.success-message h2 { color: #2e7d32; margin-top: 0; }
.error-message { max-width: 600px; margin: 1rem auto; padding: 1rem; background: #ffe6e6; border: 2px solid #f44336; border-radius: 6px; color: #c62828; }

/* Admin submission review styles */
.submissions-list { max-width: 900px; margin: 2rem auto; }
.submission-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.submission-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; }
.submission-header h2 { margin: 0; font-size: 1.3rem; color: #333; }
.status-badge { padding: 4px 12px; border-radius: 12px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; }
.status-pending { background: #fff3cd; color: #856404; }
.status-approved { background: #d4edda; color: #155724; }
.status-rejected { background: #f8d7da; color: #721c24; }
.submission-details { margin: 1rem 0; }
.detail-row { display: flex; margin-bottom: 0.5rem; }
.detail-row .label { font-weight: 600; min-width: 120px; color: #555; }
.detail-row .value { color: #333; }
.submission-actions { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eee; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.submission-actions form { display: flex; align-items: center; gap: 0.5rem; }
.approve-btn { padding: 0.6rem 1.5rem; background: #4caf50; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; }
.approve-btn:hover { background: #45a049; }
.reject-btn { padding: 0.6rem 1.5rem; background: #f44336; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; }
.reject-btn:hover { background: #da190b; }
.no-submissions { text-align: center; color: #666; padding: 2rem; font-style: italic; }
.admin-nav { max-width: 900px; margin: 2rem auto; text-align: center; padding: 1rem; background: #f9f9f9; border-radius: 6px; }
.admin-nav a { color: #0066cc; text-decoration: none; margin: 0 0.5rem; }
.admin-nav a:hover { text-decoration: underline; }