/* =========================================================
   TOOL COMMON CSS (Tool Header, Security Banner, Container)
   ========================================================= */
.workspace-container { max-width: 1150px; margin: 0 auto; padding: 30px 20px 80px; }
.tool-header-page { text-align: center; margin: 30px 0; transition: 0.5s; }

.security-banner { background-color: #ecfdf5; border: 1px solid #10b981; color: #059669; padding: 12px 20px; border-radius: 10px; margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; transition: 0.5s; }

/* Tool Header */
.tool-header { text-align: center; margin: 30px 0; transition: 0.5s; }
.tool-header h1 { font-size: 2rem; color: #1e293b; margin-bottom: 10px; font-weight: 800;}
.tool-header span.badge { background-color: #f97316; color: white; font-size: 12px; padding: 4px 10px; border-radius: 50px; vertical-align: middle; margin-left: 10px; letter-spacing: 1px; }
.tool-header p { color: #475569; font-size: 15px; margin: 0; }

/* DARK MODE - TOOL COMMON */
body.dark-mode .security-banner { background-color: rgba(16, 185, 129, 0.1) !important; border-color: #059669 !important; color: #34d399 !important; }
body.dark-mode .tool-header h1 { color: #f8fafc !important; }
body.dark-mode .tool-header p { color: #94a3b8 !important; }