/* tools.css — Backward-compatible aliases for build.js workspace HTML class names */

/* Button aliases */
.action-btn-primary  { display:inline-flex; align-items:center; gap:8px; padding:0.7rem 1.5rem; background:var(--gradient-brand); color:white; border-radius:var(--r-md); font-size:0.875rem; font-weight:750; letter-spacing:-0.01em; box-shadow:var(--shadow-blue); transition:all var(--t-fast) var(--ease-spring); cursor:pointer; border:none; }
.action-btn-primary:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 28px rgba(37,99,235,0.3); }
.action-btn-primary:disabled { opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }

.action-btn-secondary { display:inline-flex; align-items:center; gap:8px; padding:0.7rem 1.25rem; background:transparent; border:1px solid var(--border-md); color:var(--text-secondary); border-radius:var(--r-md); font-size:0.875rem; font-weight:700; transition:all var(--t-fast); cursor:pointer; }
.action-btn-secondary:hover { color:var(--text-primary); background:var(--bg-secondary); }

/* Tool-specific layout aliases */
.tool-upload-box         { border:1.5px dashed var(--border-md); border-radius:var(--r-md); padding:3.5rem 2rem; text-align:center; cursor:pointer; background:var(--bg-subtle); transition:all var(--t-normal) var(--ease-spring); position:relative; }
.tool-upload-box:hover,
.tool-upload-box.dragover { border-color:var(--brand-blue); background:rgba(37,99,235,0.02); box-shadow:0 0 0 4px rgba(37,99,235,0.07); }

.upload-file-input { display:none; }
.tool-upload-box .upload-btn { position:relative; z-index:2; pointer-events:auto; }

.tool-upload-icon { width:48px; height:48px; color:var(--brand-blue); margin:0 auto 1rem; opacity:0.85; transition:transform var(--t-normal) var(--ease-spring); }
.tool-upload-box:hover .tool-upload-icon { transform:translateY(-4px) scale(1.05); }

#tool-file-queue  { display:flex; flex-direction:column; gap:0.5rem; margin-top:1.25rem; }

.tool-options-panel { margin-top:2rem; padding-top:2rem; border-top:1px solid var(--border-sm); }
.options-title { font-size:1rem; font-weight:750; color:var(--text-primary); margin-bottom:1.25rem; letter-spacing:-0.015em; }
.options-grid  { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1.25rem; margin-bottom:1.25rem; }

.tool-action-bar { margin-top:2rem; display:flex; justify-content:flex-end; gap:0.75rem; align-items:center; }

/* Output containers */
.output-code-container {
  display:block; background:var(--bg-secondary); border:1px solid var(--border-sm);
  border-radius:var(--r-sm); font-family:'Courier New', monospace; font-size:0.84rem;
  color:var(--text-primary); overflow:auto; white-space:pre-wrap; word-break:break-word;
  min-height:200px; padding:1.25rem; line-height:1.55; margin:0;
}

.copy-btn { position:absolute; top:0.625rem; right:0.625rem; padding:4px 10px; background:var(--bg-primary); border:1px solid var(--border-sm); border-radius:var(--r-sm); font-size:0.72rem; font-weight:700; color:var(--text-secondary); cursor:pointer; transition:all var(--t-fast); box-shadow:var(--shadow-xs); }
.copy-btn:hover { color:var(--brand-blue); border-color:var(--border-blue); }

.download-btn { display:inline-flex; align-items:center; gap:8px; padding:0.75rem 2rem; background:#10b981; color:white; border-radius:var(--r-md); font-size:0.9rem; font-weight:750; box-shadow:0 4px 16px rgba(16,185,129,0.2); transition:all var(--t-fast) var(--ease-spring); cursor:pointer; border:none; }
.download-btn:hover { background:#059669; transform:translateY(-2px); }

/* Processing overlay aliases */
.tool-processing-overlay { position:absolute; inset:0; background:rgba(255,255,255,0.94); backdrop-filter:blur(8px); display:none; flex-direction:column; align-items:center; justify-content:center; gap:1.25rem; z-index:50; border-radius:var(--r-lg); }
.tool-processing-overlay.active { display:flex; }

.spinner { width:40px; height:40px; border:3px solid rgba(15,23,42,0.06); border-top-color:var(--brand-blue); border-radius:50%; animation:spin 0.85s cubic-bezier(0.5,0,0.5,1) infinite; }
.processing-text { font-size:1rem; font-weight:700; color:var(--text-primary); }

.progress-bar-container { width:220px; height:4px; background:rgba(15,23,42,0.06); border-radius:99px; overflow:hidden; }
.progress-bar-fill { height:100%; width:0%; background:var(--gradient-brand); border-radius:99px; transition:width 0.1s linear; }

/* Result box aliases */
.tool-result-box { margin-top:1.5rem; padding:2.5rem; background:rgba(16,185,129,0.03); border:1px solid rgba(16,185,129,0.14); border-radius:var(--r-md); display:none; flex-direction:column; align-items:center; text-align:center; gap:1.25rem; }
.tool-result-box.active { display:flex; }

.success-icon-wrapper { width:56px; height:56px; background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.15); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.success-icon { color:#10b981; }

.result-title { font-size:1.25rem; font-weight:800; color:var(--text-primary); }
.result-desc  { font-size:0.875rem; color:var(--text-secondary); max-width:420px; line-height:1.55; }

/* Utility workspace layouts */
.utility-workspace-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; }
@media (max-width:768px) { .utility-workspace-grid { grid-template-columns:1fr; } }

.qr-output-container { background:var(--bg-subtle); border:1px solid var(--border-sm); border-radius:var(--r-md); padding:2rem; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.qr-canvas-wrapper { background:white; border-radius:var(--r-sm); padding:1.25rem; box-shadow:var(--shadow-md); }

/* Sidebar aliases */
.sidebar-box   { background:var(--bg-card); border:1px solid var(--border-sm); border-radius:var(--r-md); padding:1.5rem; }
.sidebar-title { font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); margin-bottom:0.875rem; }
.sidebar-list  { list-style:none; display:flex; flex-direction:column; gap:2px; }
.sidebar-list li a { display:flex; align-items:center; gap:8px; padding:0.5rem 0.625rem; border-radius:var(--r-sm); font-size:0.85rem; font-weight:600; color:var(--text-secondary); transition:all var(--t-fast); }
.sidebar-list li a:hover { color:var(--text-primary); background:var(--bg-secondary); }
.sidebar-list li.active a { color:var(--brand-blue); background:rgba(37,99,235,0.07); }

/* Tool page layout aliases */
.tool-page-layout    { max-width:1280px; margin:0 auto; padding:3rem 2rem 6rem; display:grid; grid-template-columns:240px 1fr; gap:3rem; }
.tool-sidebar        { position:sticky; top:calc(60px + 2rem); align-self:start; }
.tool-main-content   { display:flex; flex-direction:column; gap:2rem; }
.tool-header-block   { display:flex; flex-direction:column; gap:0.5rem; }
.tool-title-main     { font-size:2.5rem; font-weight:900; letter-spacing:-0.04em; color:var(--text-primary); line-height:1.05; }
.tool-desc-main      { font-size:1.05rem; color:var(--text-secondary); line-height:1.6; max-width:640px; }
.breadcrumb-separator { color:var(--text-muted); margin:0 2px; }
.section-tag         { display:inline-block; font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:0.12em; color:var(--brand-blue); margin-bottom:0.5rem; }

/* Password tool */
.password-strength-container { display:flex; flex-direction:column; gap:0.4rem; }
.password-strength-bar       { height:5px; background:rgba(15,23,42,0.06); border-radius:99px; overflow:hidden; }
.password-strength-fill      { height:100%; border-radius:99px; transition:width 0.3s var(--ease-spring), background 0.3s ease; }
.password-strength-text      { font-size:0.78rem; font-weight:700; color:var(--text-muted); }

/* Word counter */
.wordcounter-stats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.wordcounter-stat-card { background:var(--bg-subtle); border:1px solid var(--border-sm); border-radius:var(--r-sm); padding:1.25rem; text-align:center; transition:all var(--t-fast); }
.wordcounter-stat-card:hover { border-color:var(--border-blue); }
.stat-value { font-size:2.25rem; font-weight:900; color:var(--brand-blue); letter-spacing:-0.04em; line-height:1; margin-bottom:4px; }
.stat-label { font-size:0.75rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }

/* Form */
.form-group   { display:flex; flex-direction:column; gap:0.5rem; }
.form-label   { font-size:0.8rem; font-weight:750; color:var(--text-secondary); letter-spacing:0.01em; }
.form-input, .form-select, .form-textarea { width:100%; padding:0.65rem 0.875rem; background:var(--bg-secondary); border:1px solid var(--border-sm); border-radius:var(--r-sm); font-size:0.875rem; font-weight:500; color:var(--text-primary); outline:none; transition:all var(--t-fast); font-family:inherit; }
.form-input:focus, .form-select:focus, .form-textarea:focus { background:var(--bg-primary); border-color:var(--border-focus); box-shadow:0 0 0 3px rgba(37,99,235,0.10); }
.form-textarea { resize:vertical; min-height:140px; line-height:1.6; }
.form-checkbox-label { display:flex; align-items:center; gap:8px; font-size:0.875rem; font-weight:600; color:var(--text-secondary); cursor:pointer; user-select:none; }
.form-checkbox { accent-color:var(--brand-blue); width:16px; height:16px; cursor:pointer; }

/* Sections */
.section-header { display:flex; flex-direction:column; align-items:center; margin-bottom:3rem; text-align:center; }
.section-title  { font-size:2.75rem; font-weight:900; letter-spacing:-0.04em; line-height:1.08; color:var(--text-primary); margin-bottom:1rem; }

/* FAQ aliases for tool pages */
.faq-list { display:flex; flex-direction:column; gap:0.625rem; }
.faq-question-btn { width:100%; display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.4rem; font-size:0.975rem; font-weight:700; color:var(--text-primary); text-align:left; cursor:pointer; background:none; border:none; gap:1rem; }
.faq-arrow { flex-shrink:0; width:18px; height:18px; color:var(--text-muted); transition:transform var(--t-normal) var(--ease-spring); }
.faq-item.open .faq-arrow { transform:rotate(180deg); color:var(--brand-blue); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.45s var(--ease-spring); }
.faq-answer-content { padding:0 1.4rem 1.1rem; font-size:0.9375rem; color:var(--text-secondary); line-height:1.7; }

@media (max-width:1024px) { .tool-page-layout { grid-template-columns:1fr; } .tool-sidebar { display:none; } }

/* Error box */
.tool-error-box { display:none; margin-top:1rem; padding:0.9rem 1.25rem; background:#fef2f2; border:1px solid #fecaca; border-radius:10px; color:#b91c1c; font-size:0.875rem; font-weight:600; text-align:center; }
.tool-error-box.active { display:block; }

/* File preview container */
.file-preview-container { margin-top:1rem; }