/* 
 * ToolFast - Page-Specific Stylesheet
 * This file consolidates all <style> blocks from individual HTML pages 
 * for better maintainability and caching.
 */

/* == 1. Generic Page & Tool Layouts == */

.page-hero, .tool-hero {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.page-hero h1 { font-size: 2.2rem; margin-bottom: 0.5rem; }
.page-hero p { opacity: 0.85; font-size: 1rem; }

.tool-page { 
  min-height: 100vh; 
  background: var(--light-bg); 
  color: var(--text-light); 
  padding-bottom: 3rem; 
}
body.dark .tool-page { background: var(--dark-bg); color: var(--text-dark); }

.tool-hero h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.4rem; }
.tool-hero p { opacity: 0.88; font-size: 1rem; }

.tool-card { 
  background: var(--card-light); 
  border-radius: 16px; 
  box-shadow: var(--shadow); 
  padding: 2rem; 
  margin: 2.5rem auto 0; 
}
body.dark .tool-card { background: var(--card-dark); }

.doc-container {
  max-width: 860px;
  margin: 3rem auto;
  padding: 0 1.5rem 4rem;
}
.doc-container h2 {
  font-size: 1.3rem;
  color: var(--primary-color);
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid rgba(67,97,238,0.15);
}
body.dark .doc-container h2 { border-bottom-color: rgba(255,255,255,0.1); }
.doc-container p, .doc-container li {
  font-size: 0.97rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 0.6rem;
}
body.dark .doc-container p, body.dark .doc-container li { color: #bbb; }
.doc-container ul { padding-left: 1.4rem; }
.doc-container ul li { list-style: disc; }

.update-date {
  display: inline-block;
  background: rgba(67,97,238,0.08);
  color: var(--primary-color);
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 2rem;
}
.contact-box {
  background: rgba(67,97,238,0.06);
  border-left: 4px solid var(--primary-color);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  font-size: 0.95rem;
}
body.dark .contact-box { background: rgba(67,97,238,0.12); }

.seo-section { max-width: 860px; margin: 2.5rem auto; padding: 0 1rem 1rem; }
.seo-section h2 { font-size: 1.35rem; font-weight: 700; color: var(--primary-color); margin-bottom: 0.75rem; padding-bottom: 0.4rem; border-bottom: 2px solid rgba(67,97,238,0.15); }
.seo-section h3 { font-size: 1.05rem; font-weight: 600; color: var(--text-light); margin: 1.5rem 0 0.5rem; }
body.dark .seo-section h3 { color: var(--text-dark); }
.seo-section p { font-size: 0.95rem; line-height: 1.8; color: #555; margin-bottom: 0.8rem; }
body.dark .seo-section p { color: #999; }
.seo-section ul { padding-left: 1.4rem; margin-bottom: 1rem; }
.seo-section li { font-size: 0.93rem; color: #555; line-height: 1.8; margin-bottom: 4px; }
body.dark .seo-section li { color: #999; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.feature-item { background: rgba(67,97,238,0.06); border-radius: 10px; padding: 1rem; }
body.dark .feature-item { background: rgba(67,97,238,0.12); }
.feature-item strong { display: block; color: var(--primary-color); margin-bottom: 4px; font-size: 0.92rem; }
.feature-item span { font-size: 0.85rem; color: #666; line-height: 1.5; }
body.dark .feature-item span { color: #999; }

.faq-item { border-bottom: 1px solid rgba(0,0,0,0.07); padding: 0.9rem 0; }
body.dark .faq-item { border-bottom-color: rgba(255,255,255,0.07); }
.faq-item strong { display: block; color: var(--text-light); margin-bottom: 4px; font-size: 0.95rem; }
body.dark .faq-item strong { color: var(--text-dark); }
.faq-item p { margin: 0; font-size: 0.9rem; color: #666; line-height: 1.7; }
body.dark .faq-item p { color: #999; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field label { font-size: 0.88rem; font-weight: 500; color: var(--text-light); }
body.dark .field label { color: var(--text-dark); }
.field input, .field textarea, .field select { padding: 9px 12px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; font-size: 0.95rem; background: var(--light-bg); color: var(--text-light); font-family: inherit; transition: border-color 0.2s; }
body.dark .field input, body.dark .field textarea, body.dark .field select { background: #2a2a3e; border-color: rgba(255,255,255,0.12); color: var(--text-dark); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(67,97,238,0.12); }

.actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn { padding: 10px 24px; border-radius: 10px; font-size: 0.9rem; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary-color); color: white; }
.btn-primary:hover { background: var(--secondary-color); }
.btn-success { background: #2ecc71; color: white; }
.btn-success:hover { background: #27ae60; }
.btn-purple { background: #8b5cf6; color: white; }
.btn-purple:hover { background: #7c3aed; }
.btn-outline { background: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); }
.btn-outline:hover { background: rgba(67,97,238,0.1); }
.btn.hidden { display: none; }

@media (max-width: 600px) {
  .tool-hero h1, .page-hero h1 { font-size: 1.6rem; }
  .tool-card { padding: 1.25rem; margin: 1.25rem; }
  .seo-section { margin: 1.5rem; padding: 0 0 1rem; }
}

/* == 2. Page-Specific Styles == */

/* -- About Page -- */
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin: 1.5rem 0; }
.value-card { background: rgba(67,97,238,0.05); border-radius: 12px; padding: 1.25rem 1rem; text-align: center; }
body.dark .value-card { background: rgba(67,97,238,0.1); }
.value-card svg { color: var(--primary-color); margin-bottom: 0.75rem; }
.value-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--primary-color); }
.value-card p { font-size: 0.88rem; color: #666; margin: 0; }
body.dark .value-card p { color: #aaa; }

/* -- Calculator Page -- */
.calculator-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); padding: 20px; color: #fff; }
.calculator-body * { box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; }
.calculator-container { width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 20px; }
.calculator-container header { text-align: center; margin-bottom: 10px; }
.calculator-container h1 { font-size: 2.5rem; margin-bottom: 5px; background: linear-gradient(90deg, #00b4db, #0083b0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 10px rgba(0, 180, 219, 0.3); }
.calculator-container .subtitle { font-size: 1rem; color: #a0aec0; margin-bottom: 15px; }
.calculator { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.display-container { flex: 1; min-width: 300px; background: rgba(19, 28, 46, 0.8); border-radius: 20px; padding: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }
.display { background: rgba(13, 23, 42, 0.9); border-radius: 15px; padding: 25px; text-align: right; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 20px; }
.previous-operand { font-size: 1.2rem; color: rgba(255, 255, 255, 0.7); min-height: 1.5rem; word-wrap: break-word; overflow-wrap: break-word; }
.current-operand { font-size: 2.5rem; font-weight: 300; word-wrap: break-word; overflow-wrap: break-word; color: #e2e8f0; }
.info-panel { display: flex; justify-content: space-between; font-size: 0.9rem; color: #a0aec0; margin-top: 10px; }
.buttons-container { flex: 2; min-width: 500px; display: flex; flex-direction: column; gap: 15px; }
.tabs { display: flex; background: rgba(19, 28, 46, 0.8); border-radius: 15px; padding: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.tab { flex: 1; text-align: center; padding: 12px; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; color: #a0aec0; }
.tab.active { background: linear-gradient(135deg, #00b4db, #0083b0); color: white; box-shadow: 0 4px 10px rgba(0, 180, 219, 0.3); }
.buttons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; background: rgba(19, 28, 46, 0.8); border-radius: 20px; padding: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }
.buttons button { border: none; color: #e2e8f0; font-size: 1.1rem; padding: 16px 8px; cursor: pointer; transition: all 0.2s ease; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-weight: 600; position: relative; overflow: hidden; }
.buttons button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); opacity: 0; transition: opacity 0.2s; }
.buttons button:hover::before { opacity: 1; }
.buttons button:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }
.buttons button:active { transform: translateY(0); }
.number { background: linear-gradient(135deg, #334155, #475569); }
.number:hover { background: linear-gradient(135deg, #475569, #57657a); }
.operator { background: linear-gradient(135deg, #f59e0b, #d97706); font-size: 1.3rem; }
.operator:hover { background: linear-gradient(135deg, #e59400, #c46200); }
.function { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.function:hover { background: linear-gradient(135deg, #7c4dff, #6a2ee6); }
.equals { background: linear-gradient(135deg, #10b981, #059669); grid-column: span 2; font-size: 1.4rem; font-weight: 700; }
.equals:hover { background: linear-gradient(135deg, #0da271, #047b54); }
.clear { background: linear-gradient(135deg, #ef4444, #dc2626); font-weight: 700; }
.clear:hover { background: linear-gradient(135deg, #e03e3e, #c42121); }
.memory { background: linear-gradient(135deg, #f97316, #ea580c); }
.memory:hover { background: linear-gradient(135deg, #e5670e, #d44a08); }
.constant { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.constant:hover { background: linear-gradient(135deg, #05a5c0, #067a98); }
.history { background: rgba(19, 28, 46, 0.8); border-radius: 20px; padding: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); max-height: 200px; overflow-y: auto; }
.history h3 { margin-bottom: 15px; color: #00b4db; display: flex; align-items: center; gap: 10px; }
.history-item { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-family: 'Courier New', monospace; }
.history-item:last-child { border-bottom: none; }
.hidden { display: none !important; }
.button-icon { margin-right: 5px; font-size: 0.9rem; }
.glow { box-shadow: 0 0 15px rgba(0, 180, 219, 0.5); }
.special-operator { font-size: 1.4rem; font-weight: 700; }
.large-number { font-size: 1.3rem; }
.important-function { font-weight: 700; background: linear-gradient(135deg, #ec4899, #db2777); }
.important-function:hover { background: linear-gradient(135deg, #e1308c, #c21867); }
.calculator-body ::-webkit-scrollbar { width: 8px; }
.calculator-body ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
.calculator-body ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #00b4db, #0083b0); border-radius: 10px; }
@media (max-width: 768px) {
  .calculator { flex-direction: column; }
  .buttons-container, .display-container { min-width: 100%; }
  .buttons { grid-template-columns: repeat(5, 1fr); }
  .buttons button { padding: 14px 5px; font-size: 1rem; }
  .current-operand { font-size: 2rem; }
}
@media (max-width: 480px) {
  .buttons { grid-template-columns: repeat(4, 1fr); }
  .buttons button { padding: 12px 5px; font-size: 0.9rem; }
  .current-operand { font-size: 1.8rem; }
  .calculator-container h1 { font-size: 2rem; }
}

/* -- Color Tools Page -- */
.content-wrap { max-width: 900px; margin: 0 auto; padding: 2rem 1rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
.color-card { background: var(--card-light); border-radius: 16px; box-shadow: var(--shadow); padding: 1.75rem; }
body.dark .color-card { background: var(--card-dark); }
.color-card h2 { font-size: 1.05rem; font-weight: 600; color: var(--primary-color); margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(67,97,238,0.12); display: flex; align-items: center; gap: 8px; }
.picker-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.big-picker-wrap { display: flex; flex-direction: column; gap: 10px; }
.big-picker { width: 100%; height: 160px; border-radius: 12px; border: none; cursor: pointer; padding: 0; display: block; }
.color-preview { height: 80px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.08em; transition: all 0.3s; cursor: pointer; user-select: all; }
body.dark .color-preview { border-color: rgba(255,255,255,0.08); }
.conv-fields { display: flex; flex-direction: column; gap: 8px; }
.conv-field { display: flex; align-items: center; gap: 8px; background: rgba(67,97,238,0.04); border-radius: 9px; padding: 8px 10px; border: 1px solid rgba(67,97,238,0.08); transition: border-color 0.2s; }
body.dark .conv-field { background: rgba(67,97,238,0.1); border-color: rgba(67,97,238,0.15); }
.conv-field:focus-within { border-color: var(--primary-color); }
.conv-field-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary-color); min-width: 42px; }
.conv-field input { flex: 1; border: none; background: transparent; font-size: 0.9rem; font-family: 'Consolas', monospace; color: var(--text-light); outline: none; min-width: 0; }
body.dark .conv-field input { color: var(--text-dark); }
.conv-field input::placeholder { color: #bbb; }
.copy-field-btn { background: none; border: none; cursor: pointer; padding: 2px 4px; color: #aaa; border-radius: 4px; transition: color 0.2s; flex-shrink: 0; }
.copy-field-btn:hover { color: var(--primary-color); }
.copy-field-btn.ok { color: #2ecc71; }
.named-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(46,204,113,0.1); border: 1px solid rgba(46,204,113,0.2); border-radius: 20px; padding: 5px 14px; font-size: 0.85rem; font-weight: 600; color: #1a7a40; margin-top: 8px; }
body.dark .named-badge { color: #4ade80; background: rgba(46,204,113,0.12); }
.named-badge.hidden { display: none; }
.palette-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; }
.palette-btn { padding: 6px 16px; border-radius: 20px; border: 1.5px solid rgba(67,97,238,0.2); background: transparent; color: var(--primary-color); font-size: 0.83rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.palette-btn.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.palette-btn:hover:not(.active) { background: rgba(67,97,238,0.07); }
.palette-grid { display: flex; gap: 0; border-radius: 12px; overflow: hidden; height: 80px; }
.palette-swatch { flex: 1; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; transition: flex 0.3s; position: relative; }
.palette-swatch:hover { flex: 2; }
.palette-swatch-label { font-size: 0.65rem; font-weight: 600; color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.4); white-space: nowrap; opacity: 0; transition: opacity 0.2s; }
.palette-swatch:hover .palette-swatch-label { opacity: 1; }
.palette-shades { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 10px; }
.shade-item { aspect-ratio: 1; border-radius: 6px; cursor: pointer; transition: transform 0.15s; position: relative; }
.shade-item:hover { transform: scale(1.1); z-index: 1; }
.wcag-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.wcag-picker-wrap { display: flex; flex-direction: column; gap: 8px; }
.wcag-picker-wrap label { font-size: 0.82rem; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.05em; }
.wcag-mini-picker { width: 100%; height: 50px; border-radius: 9px; border: none; cursor: pointer; padding: 0; }
.wcag-hex-input { padding: 8px 12px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; font-family: 'Consolas', monospace; font-size: 0.9rem; background: var(--light-bg); color: var(--text-light); width: 100%; box-sizing: border-box; }
body.dark .wcag-hex-input { background: #1e1e2e; border-color: rgba(255,255,255,0.1); color: var(--text-dark); }
.wcag-hex-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(67,97,238,0.1); }
.wcag-preview { height: 90px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 1rem 0; border: 1px solid rgba(0,0,0,0.08); transition: all 0.3s; }
body.dark .wcag-preview { border-color: rgba(255,255,255,0.08); }
.wcag-preview-text-lg { font-size: 1.2rem; font-weight: 700; }
.wcag-preview-text-sm { font-size: 0.85rem; }
.wcag-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wcag-result-item { text-align: center; padding: 10px 6px; border-radius: 9px; border: 1px solid rgba(0,0,0,0.07); }
body.dark .wcag-result-item { border-color: rgba(255,255,255,0.07); }
.wcag-result-item.pass { background: rgba(46,204,113,0.08); border-color: rgba(46,204,113,0.2); }
.wcag-result-item.fail { background: rgba(231,76,60,0.06); border-color: rgba(231,76,60,0.15); }
.wcag-badge { font-size: 1rem; margin-bottom: 3px; }
.wcag-level { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #888; }
.wcag-status { font-size: 0.8rem; font-weight: 700; margin-top: 3px; }
.wcag-result-item.pass .wcag-status { color: #2ecc71; }
.wcag-result-item.fail .wcag-status { color: #e74c3c; }
.wcag-ratio { text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--primary-color); margin: 8px 0 4px; }
.wcag-ratio-label { text-align: center; font-size: 0.78rem; color: #aaa; }
.gradient-controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 1rem; }
.gradient-controls label { font-size: 0.82rem; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 5px; }
.grad-picker { width: 100%; height: 46px; border-radius: 9px; border: none; cursor: pointer; padding: 0; }
.grad-direction { padding: 9px 10px; border: 1px solid rgba(0,0,0,0.12); border-radius: 9px; font-size: 0.85rem; background: var(--light-bg); color: var(--text-light); font-family: inherit; cursor: pointer; width: 100%; }
body.dark .grad-direction { background: #1e1e2e; border-color: rgba(255,255,255,0.1); color: var(--text-dark); }
.gradient-preview { height: 100px; border-radius: 12px; margin-bottom: 10px; border: 1px solid rgba(0,0,0,0.08); transition: all 0.3s; }
body.dark .gradient-preview { border-color: rgba(255,255,255,0.08); }
.css-code-box { background: #1e1e2e; border-radius: 10px; padding: 12px 14px; font-family: 'Consolas', monospace; font-size: 0.83rem; color: #e0e0e0; position: relative; overflow-x: auto; white-space: pre-wrap; word-break: break-all; border: 1px solid rgba(255,255,255,0.06); }
.css-copy-btn { position: absolute; top: 8px; right: 8px; padding: 4px 10px; border-radius: 6px; border: none; background: rgba(255,255,255,0.1); color: #e0e0e0; font-size: 0.75rem; cursor: pointer; font-family: inherit; transition: background 0.2s; }
.css-copy-btn:hover { background: rgba(255,255,255,0.2); }
.css-copy-btn.ok { background: rgba(46,204,113,0.3); color: #4ade80; }
.c-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--primary-color); color: white; padding: 9px 20px; border-radius: 20px; font-size: 0.88rem; font-weight: 600; opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 9999; box-shadow: 0 4px 16px rgba(67,97,238,0.35); white-space: nowrap; }
.c-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 600px) {
  .content-wrap { padding: 1.25rem 0.75rem 2rem; }
  .picker-layout, .wcag-layout { grid-template-columns: 1fr; }
  .gradient-controls { grid-template-columns: 1fr 1fr; }
  .wcag-results { grid-template-columns: repeat(2, 1fr); }
}

/* -- Contact Page -- */
.contact-wrapper { max-width: 700px; margin: 3rem auto; padding: 0 1.5rem 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.contact-form-box { background: var(--card-light); border-radius: 12px; padding: 1.75rem; box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,0.05); }
body.dark .contact-form-box { background: var(--card-dark); }
.contact-form-box h2 { font-size: 1.2rem; color: var(--primary-color); margin-bottom: 1.25rem; }
.field textarea { resize: vertical; min-height: 110px; }
.submit-btn { width: 100%; padding: 11px; background: var(--primary-color); color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s; font-family: inherit; }
.submit-btn:hover { background: var(--secondary-color); }
.submit-btn:active { transform: scale(0.98); }
.info-box { display: flex; flex-direction: column; gap: 1rem; }
.info-card { background: rgba(67,97,238,0.05); border-radius: 12px; padding: 1.25rem; display: flex; align-items: flex-start; gap: 12px; }
body.dark .info-card { background: rgba(67,97,238,0.1); }
.info-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white; }
.info-card h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 3px; color: var(--primary-color); }
.info-card p { font-size: 0.88rem; color: #666; margin: 0; line-height: 1.5; }
body.dark .info-card p { color: #aaa; }
.success-msg { display: none; background: #EAF3DE; color: #3B6D11; padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; margin-top: 10px; text-align: center; }
@media (max-width: 600px) { .contact-wrapper { grid-template-columns: 1fr; } }

/* -- Unit Converter Page -- */
.cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; max-width: 820px; margin: 2rem auto 0; padding: 0 1rem; }
.cat-tab { padding: 7px 15px; border: none; border-radius: 20px; background: rgba(67,97,238,0.08); color: var(--primary-color); font-size: 0.84rem; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; white-space: nowrap; }
body.dark .cat-tab { background: rgba(67,97,238,0.15); }
.cat-tab.active { background: var(--primary-color); color: white; }
.cat-tab:hover:not(.active) { background: rgba(67,97,238,0.15); }
.conv-card { background: var(--card-light); border-radius: 16px; box-shadow: var(--shadow); padding: 1.75rem; max-width: 820px; margin: 1.5rem auto 0; }
body.dark .conv-card { background: var(--card-dark); }
.conv-card h2 { font-size: 1.05rem; font-weight: 600; color: var(--primary-color); margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(67,97,238,0.12); }
.conv-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; margin-bottom: 1.25rem; }
.conv-col { display: flex; flex-direction: column; gap: 6px; }
.conv-col label { font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #999; }
.conv-col select { padding: 9px 12px; border: 1px solid rgba(0,0,0,0.12); border-radius: 9px; font-size: 0.9rem; background: var(--light-bg); color: var(--text-light); font-family: inherit; cursor: pointer; transition: border-color 0.2s; }
body.dark .conv-col select { background: #1e1e2e; border-color: rgba(255,255,255,0.1); color: var(--text-dark); }
.conv-col select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(67,97,238,0.1); }
.conv-col input { padding: 12px 14px; border: 1.5px solid rgba(67,97,238,0.2); border-radius: 9px; font-size: 1.2rem; font-weight: 600; background: var(--light-bg); color: var(--text-light); font-family: inherit; transition: border-color 0.2s; width: 100%; box-sizing: border-box; }
body.dark .conv-col input { background: #1e1e2e; border-color: rgba(67,97,238,0.25); color: var(--text-dark); }
.conv-col input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(67,97,238,0.1); }
.conv-col input[readonly] { background: rgba(67,97,238,0.04); cursor: default; color: var(--primary-color); font-size: 1.25rem; }
body.dark .conv-col input[readonly] { background: rgba(67,97,238,0.1); }
.swap-btn { background: rgba(67,97,238,0.08); border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; color: var(--primary-color); flex-shrink: 0; margin-bottom: 2px; }
body.dark .swap-btn { background: rgba(67,97,238,0.18); }
.swap-btn:hover { background: var(--primary-color); color: white; transform: rotate(180deg); }
.conv-formula { background: rgba(67,97,238,0.04); border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.85rem; color: #666; font-family: 'Consolas', monospace; margin-bottom: 1rem; border-left: 3px solid rgba(67,97,238,0.2); display: none; }
body.dark .conv-formula { background: rgba(67,97,238,0.1); color: #aaa; }
.conv-formula.visible { display: block; }
.ref-table-wrap { overflow-x: auto; margin-top: 1.5rem; }
.ref-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 400px; }
.ref-table th { background: var(--primary-color); color: white; padding: 8px 12px; text-align: left; font-weight: 500; }
.ref-table td { padding: 7px 12px; border-bottom: 1px solid rgba(0,0,0,0.06); color: var(--text-light); }
body.dark .ref-table td { border-bottom-color: rgba(255,255,255,0.06); color: var(--text-dark); }
.ref-table tr:nth-child(even) td { background: rgba(67,97,238,0.03); }
body.dark .ref-table tr:nth-child(even) td { background: rgba(67,97,238,0.07); }
.ref-table td:last-child { font-family: 'Consolas', monospace; color: var(--primary-color); }
@media (max-width: 520px) {
  .conv-row { grid-template-columns: 1fr; }
  .swap-btn  { transform: rotate(90deg); margin: 0 auto; }
}
@media (max-width: 600px) { .cat-tabs  { padding: 0 0.75rem; } }

/* -- Image Converter Page -- */
.drop-zone { border: 3px dashed #c0c0c0; border-radius: 12px; padding: 2.5rem 1rem; text-align: center; cursor: pointer; transition: all 0.2s; color: #666; }
body.dark .drop-zone { border-color: #555; color: #aaa; }
.drop-zone:hover { border-color: var(--primary-color); background: rgba(67,97,238,0.04); }
.drop-zone span { color: var(--primary-color); text-decoration: underline; cursor: pointer; }
.preview-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-height: 140px; overflow-y: auto; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; padding: 8px; background: var(--light-bg); }
body.dark .preview-grid { background: #1a1a2e; border-color: rgba(255,255,255,0.08); }
.preview-main { border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; max-height: 260px; width: 100%; object-fit: contain; background: #fafafa; padding: 8px; }
body.dark .preview-main { background: #1e1e2e; border-color: rgba(255,255,255,0.1); }
.nav-btns { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.nav-btn { padding: 6px 16px; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; background: transparent; cursor: pointer; font-size: 0.9rem; color: var(--text-light); transition: all 0.2s; }
body.dark .nav-btn { border-color: rgba(255,255,255,0.15); color: var(--text-dark); }
.nav-btn:hover:not(:disabled) { background: rgba(67,97,238,0.08); border-color: var(--primary-color); }
.nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.img-counter { text-align: center; font-size: 0.85rem; color: #888; }
.fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quality-section { display: none; flex-direction: column; gap: 6px; }
.quality-section.visible { display: flex; }
.quality-label { display: flex; justify-content: space-between; font-size: 0.9rem; font-weight: 500; }
input[type="range"] { width: 100%; accent-color: var(--primary-color); cursor: pointer; }
.savings-info { font-size: 0.82rem; color: #888; }
.size-info { background: rgba(67,97,238,0.05); border-radius: 8px; padding: 10px 14px; font-size: 0.88rem; display: flex; flex-direction: column; gap: 4px; color: #555; }
body.dark .size-info { background: rgba(67,97,238,0.1); color: #bbb; }
.size-info strong { color: var(--text-light); }
body.dark .size-info strong { color: var(--text-dark); }
@media (max-width: 600px) { .fields-row { grid-template-columns: 1fr; } }

/* -- Password Generator Page -- */
.pwd-card { background: var(--card-light); border-radius: 16px; box-shadow: var(--shadow); padding: 1.75rem; margin-bottom: 1.5rem; }
body.dark .pwd-card { background: var(--card-dark); }
.pwd-display-wrap { position: relative; margin-bottom: 1rem; }
.pwd-display { width: 100%; padding: 14px 50px 14px 16px; border: 2px solid rgba(67,97,238,0.2); border-radius: 12px; font-family: 'Consolas', 'Fira Code', monospace; font-size: 1.1rem; background: rgba(67,97,238,0.03); color: var(--text-light); word-break: break-all; min-height: 54px; cursor: pointer; transition: border-color 0.2s; line-height: 1.5; box-sizing: border-box; resize: none; overflow: hidden; display: flex; align-items: center; }
body.dark .pwd-display { background: rgba(67,97,238,0.08); color: var(--text-dark); border-color: rgba(67,97,238,0.25); }
.pwd-display:hover { border-color: var(--primary-color); }
.pwd-copy-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 6px; color: #aaa; transition: color 0.2s; border-radius: 6px; }
.pwd-copy-btn:hover { color: var(--primary-color); background: rgba(67,97,238,0.08); }
.pwd-copy-btn svg { display: block; }
.strength-wrap { margin-bottom: 1.25rem; }
.strength-bar-track { height: 6px; border-radius: 3px; background: rgba(0,0,0,0.08); overflow: hidden; margin-bottom: 5px; }
body.dark .strength-bar-track { background: rgba(255,255,255,0.08); }
.strength-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease, background 0.4s ease; width: 0%; }
.strength-label { display: flex; justify-content: space-between; align-items: center; }
.strength-text { font-size: 0.82rem; font-weight: 600; }
.strength-entropy { font-size: 0.78rem; color: #aaa; }
.action-row { display: flex; gap: 10px; margin-bottom: 1.5rem; flex-wrap: wrap; }
.btn-gen { flex: 1; padding: 11px 20px; background: var(--primary-color); color: white; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.btn-gen:hover { background: var(--secondary-color); transform: translateY(-1px); }
.btn-gen:active { transform: scale(0.98); }
.btn-copy-main { padding: 11px 20px; background: transparent; color: var(--primary-color); border: 1.5px solid var(--primary-color); border-radius: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; white-space: nowrap; }
.btn-copy-main:hover { background: rgba(67,97,238,0.07); }
.btn-copy-main.copied { background: #2ecc71; color: white; border-color: #2ecc71; }
.options-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #999; margin-bottom: 12px; }
.len-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.len-slider { flex: 1; accent-color: var(--primary-color); cursor: pointer; height: 4px; }
.len-badge { background: var(--primary-color); color: white; border-radius: 8px; padding: 4px 12px; font-size: 0.9rem; font-weight: 700; min-width: 44px; text-align: center; }
.charset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.toggle-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; border-radius: 9px; background: rgba(67,97,238,0.04); border: 1px solid rgba(67,97,238,0.1); cursor: pointer; transition: all 0.2s; user-select: none; }
body.dark .toggle-item { background: rgba(67,97,238,0.1); border-color: rgba(67,97,238,0.2); }
.toggle-item:hover { border-color: var(--primary-color); }
.toggle-item.active { background: rgba(67,97,238,0.1); border-color: var(--primary-color); }
body.dark .toggle-item.active { background: rgba(67,97,238,0.2); }
.toggle-label { font-size: 0.85rem; font-weight: 500; color: var(--text-light); }
body.dark .toggle-label { color: var(--text-dark); }
.toggle-sub { font-size: 0.72rem; color: #aaa; margin-top: 1px; }
.toggle-switch { width: 34px; height: 18px; border-radius: 9px; position: relative; background: #ddd; transition: background 0.2s; flex-shrink: 0; }
body.dark .toggle-switch { background: #444; }
.toggle-item.active .toggle-switch { background: var(--primary-color); }
.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: white; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-item.active .toggle-switch::after { transform: translateX(16px); }
.exclude-row { margin-bottom: 12px; }
.exclude-row label { font-size: 0.85rem; font-weight: 500; color: var(--text-light); display: block; margin-bottom: 5px; }
body.dark .exclude-row label { color: var(--text-dark); }
.exclude-row input { width: 100%; padding: 8px 12px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; font-size: 0.9rem; background: var(--light-bg); color: var(--text-light); font-family: 'Consolas', monospace; box-sizing: border-box; }
body.dark .exclude-row input { background: #1e1e2e; border-color: rgba(255,255,255,0.1); color: var(--text-dark); }
.exclude-row input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(67,97,238,0.1); }
.multi-section { border-top: 1px solid rgba(0,0,0,0.07); padding-top: 1.25rem; }
body.dark .multi-section { border-top-color: rgba(255,255,255,0.07); }
.multi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.multi-header label { font-size: 0.85rem; font-weight: 600; color: var(--text-light); }
body.dark .multi-header label { color: var(--text-dark); }
.multi-header input[type="number"] { width: 70px; padding: 6px 10px; border: 1px solid rgba(0,0,0,0.12); border-radius: 7px; font-size: 0.9rem; text-align: center; background: var(--light-bg); color: var(--text-light); font-family: inherit; }
body.dark .multi-header input[type="number"] { background: #1e1e2e; border-color: rgba(255,255,255,0.1); color: var(--text-dark); }
.multi-list { font-family: 'Consolas', monospace; font-size: 0.88rem; background: rgba(67,97,238,0.03); border: 1px solid rgba(67,97,238,0.1); border-radius: 10px; padding: 12px; line-height: 2; color: var(--text-light); max-height: 220px; overflow-y: auto; word-break: break-all; }
body.dark .multi-list { background: rgba(67,97,238,0.08); border-color: rgba(67,97,238,0.18); color: var(--text-dark); }
.pwd-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(10px); background: #2ecc71; color: white; padding: 10px 22px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 999; white-space: nowrap; box-shadow: 0 4px 16px rgba(46,204,113,0.4); }
.pwd-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 480px) {
  .charset-grid { grid-template-columns: 1fr; }
  .pwd-display { font-size: 0.95rem; }
}

/* -- Numbers Page -- */
.section-tabs { display: flex; gap: 6px; flex-wrap: wrap; max-width: 900px; margin: 2rem auto 0; padding: 0 1rem; }
.section-tab { padding: 8px 16px; border: none; border-radius: 20px; background: rgba(67,97,238,0.08); color: var(--primary-color); font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; }
body.dark .section-tab { background: rgba(67,97,238,0.15); }
.section-tab.active { background: var(--primary-color); color: white; }
.section-tab:hover:not(.active) { background: rgba(67,97,238,0.15); }
.tool-area { max-width: 900px; margin: 1.5rem auto 0; padding: 0 1rem; }
.tool-section { display: none; }
.tool-section.active { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.tool-card h2 { font-size: 1.05rem; font-weight: 600; color: var(--primary-color); margin-bottom: 1.2rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(67,97,238,0.15); display: flex; align-items: center; gap: 8px; }
.btn-accent { background: #2ecc71; color: white; }
.btn-accent:hover { background: #27ae60; }
.btn-info { background: #17a2b8; color: white; }
.btn-info:hover { background: #138496; }
.result { display: none; margin-top: 14px; padding: 14px; border-radius: 10px; font-size: 0.92rem; line-height: 1.7; animation: fadeUp 0.3s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.result.show { display: block; }
.result h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 8px; color: var(--text-light); }
body.dark .result h3 { color: var(--text-dark); }
.result.success { background: rgba(40,167,69,0.08); border-left: 3px solid #28a745; }
.result.warning { background: rgba(255,193,7,0.08); border-left: 3px solid #ffc107; }
.result.danger  { background: rgba(220,53,69,0.08);  border-left: 3px solid #dc3545; }
.result.info    { background: rgba(67,97,238,0.06);  border-left: 3px solid var(--primary-color); }
.tags-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tag { background: var(--card-light); padding: 5px 12px; border-radius: 16px; font-size: 0.85rem; font-weight: 500; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
body.dark .tag { background: #2a2a3e; border-color: rgba(255,255,255,0.08); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px,1fr)); gap: 10px; margin: 10px 0; }
.stat-box { background: var(--card-light); border-radius: 10px; padding: 10px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
body.dark .stat-box { background: #2a2a3e; }
.stat-val { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); }
.stat-lbl { font-size: 0.75rem; color: #888; margin-top: 2px; }
.num-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.num-item { padding: 6px 10px; border-radius: 6px; font-size: 0.82rem; font-weight: 600; border: 1.5px solid transparent; cursor: default; }
.num-prime   { background: rgba(40,167,69,0.12);  border-color: #28a745; color: #1a7a32; }
.num-even    { background: rgba(23,162,184,0.12); border-color: #17a2b8; color: #0e7a8c; }
.num-odd     { background: rgba(255,193,7,0.12);  border-color: #ffc107; color: #a07800; }
.num-perfect { background: rgba(111,66,193,0.12); border-color: #6f42c1; color: #5a2d9c; }
body.dark .num-prime   { color: #4ade80; }
body.dark .num-even    { color: #67e8f9; }
body.dark .num-odd     { color: #fde047; }
body.dark .num-perfect { color: #c084fc; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 0.8rem; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.quick-btn { padding: 8px 10px; background: rgba(67,97,238,0.06); border: 1px solid rgba(67,97,238,0.15); border-radius: 8px; cursor: pointer; text-align: center; font-size: 0.85rem; font-weight: 500; color: var(--primary-color); transition: all 0.2s; }
.quick-btn:hover { background: rgba(67,97,238,0.12); }
@media (max-width: 640px) { .tool-section.active { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .section-tabs { padding: 0 0.75rem; } .tool-area { padding: 0 0.75rem; } }

/* -- Token Optimizer Page -- */
.provider-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.2rem; padding: 0.8rem; background: rgba(67, 97, 238, 0.05); border-radius: 60px; margin-bottom: 0.5rem; }
.provider-strip img { height: 24px; width: auto; opacity: 0.7; transition: opacity 0.2s; }
.provider-logo { height: 24px; width: auto; opacity: 0.75; transition: opacity 0.2s; }
.tool-page textarea { width: 100%; height: 140px; padding: 12px; border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; background: var(--light-bg); color: var(--text-light); font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.9rem; resize: vertical; }
.stats-row { display: flex; justify-content: space-between; font-size: 0.8rem; color: #666; margin-top: -0.5rem; padding: 0 4px; }
.tracker-box { background: rgba(67,97,238,0.06); border-left: 4px solid var(--primary-color); border-radius: 0 12px 12px 0; padding: 1rem; display: none; }
.diff-preview { background: rgba(0,0,0,0.03); border-radius: 10px; padding: 1rem; font-size: 0.8rem; max-height: 250px; overflow: auto; margin-top: 0.5rem; display: none; font-family: 'SF Mono', monospace; }
.provider-token-info { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; font-size: 0.7rem; color: #888; margin-top: -0.5rem; }
@media (max-width: 600px) {
  .provider-strip { gap: 0.8rem; }
  .actions { flex-direction: column; }
  .btn { width: 100%; text-align: center; }
}

/* -- QR Code Page -- */
.mode-tabs { display: flex; gap: 6px; flex-wrap: wrap; background: var(--light-bg); border-radius: 10px; padding: 6px; margin-bottom: 1.5rem; }
body.dark .mode-tabs { background: #1a1a2e; }
.mode-tab { flex: 1; min-width: 80px; padding: 8px 10px; border: none; border-radius: 7px; background: transparent; color: #888; font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; }
body.dark .mode-tab { color: #aaa; }
.mode-tab.active { background: var(--primary-color); color: white; }
.mode-tab:hover:not(.active) { background: rgba(67,97,238,0.08); color: var(--primary-color); }
.mode-panel { display: none; }
.mode-panel.active { display: block; }
.tool-grid { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; align-items: start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-desc { font-size: 0.8rem; color: #999; margin-top: -8px; margin-bottom: 8px; font-style: italic; }
.qr-preview-box { display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--light-bg); border-radius: 12px; padding: 1.25rem; border: 1px solid rgba(0,0,0,0.06); }
body.dark .qr-preview-box { background: #1a1a2e; border-color: rgba(255,255,255,0.06); }
.qr-preview-box h3 { font-size: 0.92rem; font-weight: 600; color: var(--text-light); margin: 0; }
body.dark .qr-preview-box h3 { color: var(--text-dark); }
#qrcode-wrapper { background: white; padding: 12px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); min-width: 180px; min-height: 180px; display: flex; align-items: center; justify-content: center; }
.qr-placeholder-box { text-align: center; color: #bbb; padding: 1rem; font-size: 0.82rem; line-height: 1.5; }
.qr-placeholder-box svg { opacity: 0.3; margin-bottom: 8px; }
.options-section { margin-top: 1.5rem; }
.option-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 0.9rem; }
body.dark .option-row { border-bottom-color: rgba(255,255,255,0.05); }
.option-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-light); }
body.dark .option-row label { color: var(--text-dark); }
.option-row input[type="checkbox"] { accent-color: var(--primary-color); width: 16px; height: 16px; cursor: pointer; }
.slider-row { display: flex; align-items: center; gap: 10px; }
.slider-row input[type="range"] { flex: 1; accent-color: var(--primary-color); cursor: pointer; }
.slider-val { font-size: 0.82rem; color: #888; min-width: 40px; text-align: right; }
.color-palette { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.color-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; }
.color-dot.selected, .color-dot:hover { border-color: var(--primary-color); transform: scale(1.15); }
.color-input-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
#custom-color { width: 48px; height: 36px; border: none; border-radius: 6px; cursor: pointer; padding: 0; }
.custom-tabs { display: flex; gap: 4px; background: var(--light-bg); border-radius: 8px; padding: 4px; margin-bottom: 14px; }
body.dark .custom-tabs { background: #1a1a2e; }
.custom-tab-btn { flex: 1; padding: 6px 8px; border: none; border-radius: 6px; background: transparent; color: #888; font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.custom-tab-btn.active { background: var(--primary-color); color: white; }
.custom-tab-btn:hover:not(.active) { color: var(--primary-color); }
.custom-panel { display: none; }
.custom-panel.active { display: block; }
.logo-preview-small { width: 64px; height: 64px; border-radius: 8px; border: 2px dashed rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--light-bg); font-size: 1.5rem; color: #ccc; }
body.dark .logo-preview-small { background: #2a2a3e; border-color: rgba(255,255,255,0.15); }
.logo-preview-small img { width: 100%; height: 100%; object-fit: contain; }
.logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.btn-sm { padding: 6px 14px; font-size: 0.82rem; border-radius: 7px; border: none; cursor: pointer; font-family: inherit; font-weight: 500; transition: all 0.2s; }
.btn-sm-primary { background: var(--primary-color); color: white; }
.btn-sm-danger { background: #ef4444; color: white; }
.btn-sm:hover { opacity: 0.85; }
.info-box { background: rgba(67,97,238,0.06); border-left: 3px solid var(--primary-color); border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 0.85rem; color: #666; margin-top: 1rem; line-height: 1.5; }
body.dark .info-box { background: rgba(67,97,238,0.12); color: #aaa; }
.qr-notification { position: fixed; top: 80px; right: 20px; background: var(--primary-color); color: white; padding: 12px 20px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); font-size: 0.9rem; font-weight: 500; z-index: 9999; animation: slideIn 0.25s ease; }
@keyframes slideIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@media (max-width: 640px) { .tool-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } .mode-tab { font-size: 0.78rem; padding: 7px 6px; } }

/* -- SecureJS Page -- */
.editor-label { font-size: 0.88rem; font-weight: 600; color: var(--text-light); margin-bottom: 6px; display: block; }
body.dark .editor-label { color: var(--text-dark); }
.code-area { width: 100%; height: 200px; padding: 12px 14px; border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.88rem; background: #fafafa; color: #1e1e1e; resize: vertical; box-sizing: border-box; transition: border-color 0.2s; line-height: 1.6; }
body.dark .code-area { background: #1a1a2e; color: #e0e0e0; border-color: rgba(255,255,255,0.12); }
.code-area:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(67,97,238,0.12); }
.code-area[readonly] { background: rgba(67,97,238,0.03); }
body.dark .code-area[readonly] { background: rgba(67,97,238,0.08); }
.options-box { background: rgba(67,97,238,0.05); border-radius: 10px; padding: 1.25rem; margin: 1.25rem 0; border: 1px solid rgba(67,97,238,0.1); }
body.dark .options-box { background: rgba(67,97,238,0.1); border-color: rgba(67,97,238,0.2); }
.options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.option-check { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--text-light); cursor: pointer; padding: 6px 8px; border-radius: 7px; transition: background 0.15s; }
body.dark .option-check { color: var(--text-dark); }
.option-check:hover { background: rgba(67,97,238,0.08); }
.option-check input[type="checkbox"] { accent-color: var(--primary-color); width: 16px; height: 16px; cursor: pointer; }
.warning-box { background: rgba(255,193,7,0.08); border-left: 3px solid #ffc107; border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 0.85rem; color: #7a5c00; margin: 12px 0; }
body.dark .warning-box { color: #fde68a; background: rgba(255,193,7,0.1); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.btn-big { width: 100%; padding: 12px; font-size: 1rem; margin-bottom: 1.5rem; }
.section-sep { border: none; border-top: 1px solid rgba(0,0,0,0.07); margin: 1.5rem 0; }
body.dark .section-sep { border-top-color: rgba(255,255,255,0.07); }
@media (max-width: 600px) { .options-grid { grid-template-columns: 1fr; } }

/* -- Video Converter Page -- */
.preview-main:not([src]) { display: none; }
.drop-zone.has-file { padding: 1rem; }
.drop-zone.has-file p { font-size: 0.9rem; }
.progress-container { display: flex; flex-direction: column; gap: 8px; }
.status-box { text-align: center; font-size: 0.9rem; color: #888; background: rgba(0,0,0,0.03); padding: 12px; border-radius: 8px; min-height: 45px; display: flex; align-items: center; justify-content: center; }
body.dark .status-box { background: rgba(255,255,255,0.05); }
.progress-bar-wrapper { width: 100%; background: rgba(0,0,0,0.05); border-radius: 10px; height: 10px; overflow: hidden; display: none; }
body.dark .progress-bar-wrapper { background: rgba(255,255,255,0.08); }
.progress-bar { width: 0%; height: 100%; background: var(--primary-color); border-radius: 10px; transition: width 0.3s ease; }
.checkbox-field { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }