/* ═══════════════════════════════════════════════════════════════
   features.css — consolidated per-view styles for user-facing views
   Extracted from inline <style> blocks. Layout tokens stay in _Layout.cshtml.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   SHARED TOOL-PAGE BASE
   Used by: Image/*, PDF/*, QR/*, URL/Capture, ImageWatermark/*
   ──────────────────────────────────────────────────────────── */
.cv-scene {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 50% 40% at 12% 10%, rgba(255,80,0,.06) 0%, transparent 100%),
                radial-gradient(ellipse 40% 35% at 88% 90%, rgba(14,92,86,.05) 0%, transparent 100%);
}
.cv-head { position: relative; z-index: 1; padding: 36px 24px 20px; text-align: center; }
.cv-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--sub); margin-bottom: 10px; }
.cv-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.cv-title { font-size: clamp(1.55rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.cv-title strong { color: var(--orange); }
.cv-sub { font-size: .83rem; color: var(--sub); margin-top: 6px; }
.cv-wrap { position: relative; z-index: 1; padding: 0 20px 48px; }
.cv-max { max-width: 680px; margin: 0 auto; }

.tool-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 26px; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.07), 0 12px 40px rgba(0,0,0,.05); }
.tool-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--orange) 0%, rgba(255,80,0,.1) 100%); border-radius: var(--r) var(--r) 0 0; }
.cv-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.cv-card-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--orange-d); color: var(--orange); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.cv-card-icon-teal { background: var(--teal-d); color: var(--teal); }
.cv-card-title { font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.cv-card-sub { font-size: .7rem; color: var(--sub); margin-top: 1px; }
.cv-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--sub); display: block; margin-bottom: 6px; }
.cv-field { margin-bottom: 14px; }
.cv-input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: .84rem; font-family: 'Roboto', sans-serif; color: var(--ink); background: var(--card); outline: none; transition: border-color var(--tr), box-shadow var(--tr); }
.cv-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,80,0,.1); }
.cv-select { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: .84rem; font-family: 'Roboto', sans-serif; color: var(--ink); background: var(--card); outline: none; transition: border-color var(--tr); }
.cv-select:focus { border-color: var(--orange); }
.cv-divider { height: 1px; background: var(--border); margin: 20px 0; }
.cv-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin-bottom: 24px; }
.cv-tab { padding: 8px 14px; font-size: .78rem; font-weight: 700; color: var(--sub); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color var(--tr), border-color var(--tr); white-space: nowrap; }
.cv-tab.active { color: var(--orange); border-bottom-color: var(--orange); }
.cv-tab:hover:not(.active) { color: var(--ink); }

/* Drag / drop zone */
.drag-area { border: 1.5px dashed var(--orange-b); border-radius: var(--r2); padding: 36px 20px; text-align: center; cursor: pointer; background: var(--orange-d); transition: background var(--tr), border-color var(--tr), transform var(--tr); margin-bottom: 18px; }
.drag-area:hover { background: var(--orange-d); filter: brightness(.95); border-color: var(--orange); }
.dragover { background: var(--orange-d) !important; filter: brightness(.9); border-color: var(--orange) !important; transform: scale(1.01); box-shadow: 0 0 0 3px rgba(255,80,0,.14); }
.dz-icon-wrap { width: 48px; height: 48px; border-radius: 13px; background: rgba(255,80,0,.14); border: 1px solid rgba(255,80,0,.28); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--orange); margin: 0 auto 12px; transition: transform var(--tr); }
.dragover .dz-icon-wrap { transform: translateY(-4px) scale(1.06); }
.drag-area p { font-size: .84rem; font-weight: 600; color: var(--ink); margin: 0 0 3px; }
.drag-area p span { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.drag-area small { font-size: .68rem; color: var(--sub); }

/* File list */
#fileList { border: 1px solid #e8e4e0; border-radius: 9px; overflow: hidden; margin-bottom: 14px; background: #fff; }
#fileList .list-group-item { background: transparent; border-color: #f4f2f0; padding: 9px 13px; display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--ink); }

/* Progress bar */
.prog-wrap { margin-top: 12px; }
.prog-bar-track { width: 100%; height: 3px; background: #e8e4e0; border-radius: 100px; overflow: hidden; margin-bottom: 9px; }
.prog-bar-fill { height: 100%; border-radius: 100px; width: 0%; background: var(--orange); transition: width .3s var(--ease), background .3s; }
.prog-bar-fill.success { background: var(--ok); }
.prog-bar-fill.danger  { background: var(--err); }
.prog-bar-fill.warning { background: #D98E04; }
.prog-stats { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; }
.prog-pct { font-size: .86rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.prog-details { text-align: right; }
.prog-mb { font-size: .68rem; color: var(--sub); }
.prog-spd { font-size: .62rem; color: #a09b96; margin-top: 1px; }

/* Buttons */
.btn-action { background: var(--orange); border: none; color: #fff; font-weight: 700; font-size: .84rem; padding: 12px 20px; border-radius: 9px; width: 100%; cursor: pointer; transition: background var(--tr), transform var(--tr), box-shadow var(--tr); display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: -.01em; }
.btn-action:hover:not(:disabled) { background: var(--orange-h); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255,80,0,.3); }
.btn-action:disabled { opacity: .45; cursor: not-allowed; }
.btn-download { display: inline-flex; align-items: center; gap: 8px; background: var(--teal); color: #fff; border: none; font-weight: 700; font-size: .84rem; padding: 11px 22px; border-radius: 9px; text-decoration: none; width: 100%; justify-content: center; transition: background var(--tr), transform var(--tr), box-shadow var(--tr); margin-top: 12px; }
.btn-download:hover { background: #0a4440; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14,92,86,.28); }

/* Preview panel (Upscale, Remove, etc.) */
.limits-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.limit-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 600; padding: 5px 12px; border-radius: 100px; background: rgba(255,80,0,.06); border: 1px solid rgba(255,80,0,.15); color: var(--sub); }
.preview-panel { margin-top: 20px; border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; background: var(--card); }
.preview-title { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f4f2f0; border-bottom: 1px solid #e8e4e0; font-size: .72rem; font-weight: 700; color: var(--sub); }
.pt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.img-card { display: flex; align-items: center; justify-content: center; background: #f9f8f7; padding: 12px; }
.img-card img { max-width: 100%; height: auto; object-fit: contain; display: block; }
.img-card.transparent-bg { background: repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; }
.btn-download-full { display: inline-flex; align-items: center; gap: 8px; background: var(--teal); color: #fff; border: none; font-weight: 700; font-size: .84rem; padding: 11px 22px; border-radius: 9px; text-decoration: none; width: 100%; justify-content: center; transition: background var(--tr), transform var(--tr), box-shadow var(--tr); margin-top: 12px; cursor: pointer; }
.btn-download-full:hover { background: #0a4440; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14,92,86,.28); }

/* Processing indicator */
#processingIndicator { background: rgba(217,142,4,.08); border: 1px solid rgba(217,142,4,.2); border-radius: 9px; padding: 10px 14px; font-size: .78rem; color: #a06c00; display: none; align-items: center; gap: 8px; margin-top: 10px; }

/* Message box / toast */
#messageBox { position: fixed; top: 16px; right: 16px; z-index: 9999; padding: 10px 14px; color: #fff; border-radius: 11px; font-weight: 600; font-size: .79rem; box-shadow: 0 10px 30px rgba(0,0,0,.35); max-width: 310px; backdrop-filter: blur(16px); display: none; align-items: center; gap: 7px; }
.alert-success { background: rgba(46,125,79,.94);  border: 1px solid rgba(46,125,79,.4); }
.alert-danger  { background: rgba(193,64,31,.94);  border: 1px solid rgba(193,64,31,.4); }
.alert-warning { background: rgba(217,142,4,.94);  border: 1px solid rgba(217,142,4,.4); }

@media (max-width: 576px) { .tool-card { padding: 20px 16px; } }


/* ═══ Account/Login ═══ */
.auth-wrap { min-height: calc(100vh - 60px); display: grid; grid-template-columns: 1fr 1fr; }

.auth-left {
    background: #0f1410;
    display: flex; flex-direction: column; justify-content: center;
    padding: 60px 52px; position: relative; overflow: hidden;
}
.auth-left::before {
    content: ''; position: absolute;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(255,80,0,.18) 0%, transparent 70%);
    top: -120px; left: -120px; pointer-events: none;
}
.auth-left::after {
    content: ''; position: absolute;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(14,92,86,.2) 0%, transparent 70%);
    bottom: -80px; right: -80px; pointer-events: none;
}
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 52px; text-decoration: none; position: relative; }
.auth-brand-icon { width: 36px; height: 36px; background: var(--orange); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.auth-brand-text { font-size: 1rem; font-weight: 700; color: #f5f3f0; }
.auth-brand-text span { color: var(--orange); }
.auth-left-title { font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 800; letter-spacing: -.02em; color: #f5f3f0; line-height: 1.15; margin-bottom: 14px; position: relative; }
.auth-left-title strong { color: var(--orange); }
.auth-left-sub { color: #6b6560; font-size: .88rem; line-height: 1.7; margin-bottom: 44px; position: relative; }
.auth-features { display: flex; flex-direction: column; gap: 12px; position: relative; }
.auth-feature { display: flex; align-items: center; gap: 12px; font-size: .82rem; color: #9a9590; }
.auth-feature-dot { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; }

.auth-right { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px 40px; background: var(--surface); }
.auth-form-box { width: 100%; max-width: 400px; }
.auth-form-title { font-size: 1.7rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin-bottom: 6px; }
.auth-form-sub { font-size: .83rem; color: var(--sub); margin-bottom: 30px; }
.auth-form-sub a { color: var(--orange); text-decoration: none; font-weight: 600; }
.auth-form-sub a:hover { text-decoration: underline; }

.auth-error { background: rgba(193,64,31,.08); border: 1px solid rgba(193,64,31,.2); border-radius: 10px; padding: 12px 16px; color: var(--err); font-size: .82rem; margin-bottom: 18px; display: none; }
.field-label { font-size: .62rem; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 6px; display: block; }
.auth-input { width: 100%; background: var(--card); border: 1px solid #e0dbd6; border-radius: 9px; padding: 11px 14px; color: var(--ink); font-size: .88rem; font-family: 'Roboto', sans-serif; outline: none; transition: border-color var(--tr), box-shadow var(--tr); }
.auth-input::placeholder { color: #c4bfba; }
.auth-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,80,0,.1); }
.field-error { font-size: .73rem; color: var(--err); margin-top: 5px; display: block; }
.pass-wrap { position: relative; }
.pass-wrap .auth-input { padding-right: 44px; }
.eye-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #b0aaa5; cursor: pointer; padding: 4px; font-size: .9rem; transition: color var(--tr); }
.eye-toggle:hover { color: var(--sub); }
.remember-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.remember-label { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--sub); cursor: pointer; }
.remember-check { width: 15px; height: 15px; accent-color: var(--orange); cursor: pointer; }
.forgot-link { font-size: .82rem; color: var(--orange); text-decoration: none; font-weight: 500; }
.forgot-link:hover { text-decoration: underline; }
.btn-auth { width: 100%; padding: 12px; border-radius: 10px; border: none; font-size: .88rem; font-weight: 700; color: #fff; background: var(--orange); cursor: pointer; transition: background var(--tr), transform var(--tr), box-shadow var(--tr); font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-auth:hover { background: var(--orange-h); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255,80,0,.3); }
.btn-auth:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 22px 0; color: #c4bfba; font-size: .72rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #e8e4e0; }
.auth-bottom { text-align: center; margin-top: 22px; font-size: .8rem; color: var(--sub); }
.auth-bottom a { color: #9a9590; text-decoration: none; }
.auth-bottom a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-left { display: none; }
    .auth-right { padding: 40px 24px; min-height: calc(100vh - 60px); }
}


/* ═══ Account/Register ═══ */
.plan-teaser { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.plan-chip { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e8e4e0; border-radius: 10px; padding: 10px 14px; }
.plan-chip.active { border-color: var(--orange); background: var(--orange-d); }
.plan-chip-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.plan-chip-name { font-size: .82rem; font-weight: 700; color: var(--ink); }
.plan-chip-desc { font-size: .7rem; color: var(--sub); margin-top: 1px; }
.plan-chip-price { font-size: .78rem; font-weight: 700; color: var(--orange); margin-left: auto; }

/* Password strength (shared by Register, ChangePassword, ResetPassword) */
.strength-bar-track { height: 4px; background: #e8e4e0; border-radius: 100px; overflow: hidden; margin: 8px 0 4px; }
.strength-bar-fill { height: 100%; border-radius: 100px; width: 0%; transition: width .3s, background .3s; }
.strength-label { font-size: .68rem; color: var(--sub); }
.pwd-rules { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.pwd-rule { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--sub); }
.pwd-rule i { font-size: .65rem; }
.pwd-rule.ok { color: var(--ok); }
.pwd-rule.ok i::before { content: '\f633'; } /* bi-check-circle-fill */


/* ═══ Account/ChangePassword, Forgot, ForgotPasswordConfirmation, ResetPassword, ResetPasswordConfirmation ═══ */
.auth-center { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--surface); }
.auth-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 38px 36px; width: 100%; max-width: 420px; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 8px 32px rgba(0,0,0,.08), 0 24px 64px rgba(0,0,0,.06); }
.auth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--orange) 0%, rgba(255,80,0,.1) 100%); border-radius: 18px 18px 0 0; }
.auth-icon { width: 48px; height: 48px; background: var(--orange-d); border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--orange); margin-bottom: 18px; }
.success-icon { background: rgba(46,125,79,.1); color: var(--ok); }
.auth-title { font-size: 1.35rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin-bottom: 6px; }
.auth-sub { font-size: .83rem; color: var(--sub); margin-bottom: 26px; line-height: 1.6; }
.auth-error { background: rgba(193,64,31,.08); border: 1px solid rgba(193,64,31,.2); border-radius: 10px; padding: 12px 16px; color: var(--err); font-size: .82rem; margin-bottom: 18px; display: none; }
.auth-success { background: rgba(46,125,79,.08); border: 1px solid rgba(46,125,79,.2); border-radius: 10px; padding: 12px 16px; color: var(--ok); font-size: .82rem; margin-bottom: 18px; }
.auth-msg { font-size: .85rem; color: var(--sub); line-height: 1.7; margin-bottom: 22px; }
.auth-back { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--sub); text-decoration: none; margin-bottom: 20px; font-weight: 500; }
.auth-back:hover { color: var(--ink); }
.auth-note { font-size: .75rem; color: #a09b96; text-align: center; margin-top: 18px; }
.btn-back { display: inline-flex; align-items: center; gap: 7px; background: var(--orange); color: #fff; border: none; border-radius: 10px; padding: 11px 22px; font-size: .88rem; font-weight: 700; text-decoration: none; transition: background var(--tr); }
.btn-back:hover { background: var(--orange-h); color: #fff; }
.btn-signin { display: inline-flex; align-items: center; gap: 7px; background: var(--orange); color: #fff; border: none; border-radius: 10px; padding: 11px 22px; font-size: .88rem; font-weight: 700; text-decoration: none; transition: background var(--tr); }
.btn-signin:hover { background: var(--orange-h); color: #fff; }


/* ═══ Account/Profile ═══ */
.cv-scene-profile { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 50% 40% at 10% 10%, rgba(255,80,0,.05) 0%, transparent 100%), radial-gradient(ellipse 40% 35% at 90% 90%, rgba(14,92,86,.04) 0%, transparent 100%); }
.cv-wrap-profile { position: relative; z-index: 1; padding: 36px 20px 60px; }
.cv-max-profile { max-width: 600px; margin: 0 auto; }
.profile-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.07), 0 12px 40px rgba(0,0,0,.05); }
.profile-header { background: linear-gradient(135deg, #0f1410 0%, #1a2015 100%); padding: 32px 28px; display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; }
.profile-header::before { content: ''; position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,80,0,.15) 0%, transparent 70%); top: -60px; right: -40px; pointer-events: none; }
.profile-avatar { width: 56px; height: 56px; border-radius: 14px; background: var(--orange); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; color: #fff; flex-shrink: 0; position: relative; }
.profile-name { font-size: 1.05rem; font-weight: 700; color: #f5f3f0; letter-spacing: -.01em; }
.profile-role { font-size: .72rem; color: #6b6560; margin-top: 2px; }
.plan-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; }
.plan-badge.plan-free     { background: rgba(107,101,96,.15); color: #9a9590; border: 1px solid rgba(107,101,96,.25); }
.plan-badge.plan-pro      { background: rgba(255,80,0,.2); color: #ff8c5a; border: 1px solid rgba(255,80,0,.3); }
.plan-badge.plan-business { background: rgba(14,92,86,.2); color: #4db8b0; border: 1px solid rgba(14,92,86,.3); }
.top-plan-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; }
.top-plan-badge.plan-free     { background: rgba(107,101,96,.15); color: #9a9590; }
.top-plan-badge.plan-pro      { background: rgba(255,80,0,.2); color: #ff8c5a; }
.top-plan-badge.plan-business { background: rgba(14,92,86,.2); color: #4db8b0; }
.alert-renew { background: rgba(193,64,31,.08); border: 1px solid rgba(193,64,31,.2); border-radius: 10px; padding: 10px 14px; color: var(--err); font-size: .78rem; margin: 18px 20px 0; display: flex; align-items: center; gap: 8px; }
.section-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--sub); padding: 18px 24px 10px; }
.detail-grid { display: flex; flex-direction: column; gap: 0; }
.detail-key { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--sub); }
.detail-val { font-size: .88rem; font-weight: 600; color: var(--ink); margin-top: 1px; }
.credits-bar-track { height: 5px; background: #e8e4e0; border-radius: 100px; overflow: hidden; margin: 6px 0 3px; }
.credits-bar-fill { height: 100%; border-radius: 100px; background: var(--orange); transition: width .4s; }
.action-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 24px; border-top: 1px solid #e8e4e0; }
.btn-outline-sec { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid #e0dbd6; color: var(--sub); border-radius: 9px; padding: 9px 16px; font-size: .82rem; font-weight: 600; text-decoration: none; transition: border-color var(--tr), background var(--tr), color var(--tr); }
.btn-outline-sec:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-d); }
.btn-orange { display: inline-flex; align-items: center; gap: 6px; background: var(--orange); border: 1px solid transparent; color: #fff; border-radius: 9px; padding: 9px 16px; font-size: .82rem; font-weight: 600; text-decoration: none; transition: background var(--tr); }
.btn-orange:hover { background: var(--orange-h); color: #fff; }
.btn-teal { display: inline-flex; align-items: center; gap: 6px; background: var(--teal); border: 1px solid transparent; color: #fff; border-radius: 9px; padding: 9px 16px; font-size: .82rem; font-weight: 600; text-decoration: none; transition: background var(--tr); }
.btn-teal:hover { background: #0a4440; color: #fff; }
.btn-outline-danger { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(193,64,31,.25); color: var(--err); border-radius: 9px; padding: 9px 16px; font-size: .82rem; font-weight: 600; text-decoration: none; transition: border-color var(--tr), background var(--tr); }
.btn-outline-danger:hover { border-color: var(--err); background: rgba(193,64,31,.06); }


/* ═══ Billing/AddCredits ═══ */
/* Styles live in Views/Billing/AddCredits.cshtml <style> block */


/* ═══ Billing/Checkout ═══ */
/* Styles live in Views/Billing/Checkout.cshtml <style> block */


/* ═══ Billing/Pricing ═══ */
/* Styles live in Views/Billing/Pricing.cshtml <style> block */


/* ═══ Home/Index ═══ */
html {
    --send-bg: #fff8f5; --recv-bg: #f0faf9;
    --send-border: rgba(255,107,26,.18); --recv-border: rgba(14,92,86,.15);
    --send-accent: #FF6B1A; --recv-accent: #0E5C56;
    --send-d: #fff3ee; --recv-d: #eef7f6;
    --send-h: #C93E00;
    --r: 16px; --r2: 12px;
}
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.page-head { position: relative; z-index: 1; text-align: center; padding: 44px 20px 28px; }
.live-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--sub); margin-bottom: 10px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(46,125,79,.4); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(46,125,79,.4); } 70% { box-shadow: 0 0 0 6px rgba(46,125,79,0); } 100% { box-shadow: 0 0 0 0 rgba(46,125,79,0); } }
.page-title { font-size: clamp(2rem,5vw,3.2rem); font-weight: 900; line-height: 1.08; letter-spacing: -.04em; color: var(--ink); margin-bottom: 10px; }
.card-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 26px; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.07), 0 12px 40px rgba(0,0,0,.05); position: relative; overflow: hidden; }
.card-top-rule { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--r) var(--r) 0 0; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.card-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.dz { border: 1.5px dashed; border-radius: var(--r2); padding: 28px 16px; text-align: center; cursor: pointer; transition: background var(--tr), border-color var(--tr), transform var(--tr); }
.dz-icon { font-size: 1.4rem; margin-bottom: 8px; }
.f-thumb { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; flex-shrink: 0; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.f-ico { width: 22px; height: 22px; border-radius: 5px; border: 1px solid; display: flex; align-items: center; justify-content: center; font-size: .65rem; flex-shrink: 0; }
.inp { width: 100%; border: 1px solid #e0dbd6; border-radius: 9px; padding: 10px 13px; font-size: .86rem; font-family: 'Roboto', sans-serif; color: var(--ink); background: #fff; outline: none; transition: border-color var(--tr), box-shadow var(--tr); }
.inp:focus { border-color: var(--send-accent); box-shadow: 0 0 0 3px rgba(255,107,26,.1); }
.code-entry { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.digit-dash { width: 10px; height: 2px; background: #c4bfba; border-radius: 1px; align-self: center; flex-shrink: 0; }
.digit-inp { width: 44px; height: 52px; border: 1px solid #e0dbd6; border-radius: 9px; text-align: center; font-size: 1.3rem; font-weight: 700; color: var(--ink); background: #fff; outline: none; caret-color: var(--recv-accent); transition: border-color .2s, box-shadow .2s, transform .2s; font-family: 'Roboto', sans-serif; }
.digit-inp.has-val { background: var(--recv-d); border-color: rgba(14,92,86,.3); color: var(--recv-accent); }
.digit-inp:focus { border-color: var(--recv-accent); box-shadow: 0 0 0 3px rgba(14,92,86,.12); transform: translateY(-1px); }
.btn-send { width: 100%; background: var(--send-accent); border: none; color: #fff; font-weight: 700; font-size: .86rem; padding: 11px 16px; border-radius: 9px; cursor: pointer; transition: background var(--tr), transform var(--tr), box-shadow var(--tr); display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-send:hover:not(:disabled) { background: var(--send-h); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255,107,26,.3); }
.btn-send:disabled { opacity: .45; cursor: not-allowed; }
.btn-recv { width: 100%; background: var(--recv-accent); border: none; color: #fff; font-weight: 700; font-size: .86rem; padding: 11px 16px; border-radius: 9px; cursor: pointer; transition: background var(--tr), transform var(--tr), box-shadow var(--tr); display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-recv:hover:not(:disabled) { background: #0a4440; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(14,92,86,.28); }
.btn-recv:disabled { opacity: .45; cursor: not-allowed; }
.btn-ok { width: 100%; background: var(--ok); border: none; color: #fff; font-weight: 700; font-size: .86rem; padding: 11px 16px; border-radius: 9px; cursor: pointer; transition: background var(--tr), transform var(--tr); display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-ok:hover { background: #256640; transform: translateY(-1px); }
.btn-ghost { background: transparent; border: 1px solid #e0dbd6; color: var(--sub); font-size: .78rem; font-weight: 600; padding: 7px 14px; border-radius: 7px; cursor: pointer; transition: background var(--tr), color var(--tr), border-color var(--tr); display: inline-flex; align-items: center; gap: 6px; }
.btn-ghost:hover { background: #f4f2f0; color: var(--ink); border-color: #cdc8c3; }
.eye-btn { background: transparent; border: 1px solid #e0dbd6; color: var(--sub); padding: 7px 10px; border-radius: 7px; cursor: pointer; transition: all var(--tr); display: inline-flex; align-items: center; }
.eye-btn:hover { background: #f4f2f0; }
.share-box { background: #f4f2f0; border: 1px solid #e8e4e0; border-radius: 10px; padding: 14px; }
.code-digits { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.code-box { width: 48px; height: 58px; background: var(--card); border: 1.5px solid var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; transition: border-color .2s, box-shadow .2s, transform .2s; cursor: default; }
.code-box.filled { background: rgba(14,92,86,.07); border-color: rgba(14,92,86,.25); color: var(--recv-accent); }
.pw-box { background: #f9f8f7; border: 1px solid #e8e4e0; border-radius: 8px; padding: 7px 11px; font-size: .78rem; color: var(--ink); font-family: monospace; letter-spacing: .04em; flex: 1; }
.steps-wrap { max-width: 860px; margin: 0 auto; padding: 0 20px 48px; }
.timeline { position: relative; }
.spec-section { max-width: 860px; margin: 0 auto; padding: 0 20px 48px; }
.spec-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.spec-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; border-bottom: 1px solid var(--border); transition: background var(--tr); }
.spec-row:last-child { border-bottom: none; }
.spec-row:hover { background: #f4f2f0; }
.spec-row:nth-child(odd)  { background: #faf8f6; }
.spec-row:nth-child(even) { background: #fff; }
#messageBox { position: fixed; top: 16px; right: 16px; z-index: 9999; padding: 10px 14px; color: #fff; border-radius: 11px; font-weight: 600; font-size: .79rem; box-shadow: 0 10px 30px rgba(0,0,0,.35); max-width: 310px; backdrop-filter: blur(16px); display: none; align-items: center; gap: 7px; }


/* ═══ Image/Upscale ═══ */
.cv-max-wide { max-width: 900px; margin: 0 auto; }
.result-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; margin-top: 16px; }


/* ═══ ImageCompress/Compress ═══ */
.compress-stats { background: rgba(13,148,136,.08); border: 1px solid rgba(13,148,136,.2); border-radius: 9px; padding: 12px 14px; margin-top: 12px; display: flex; align-items: center; gap: 12px; font-size: .8rem; }


/* ═══ ImageConverter/Convert ═══ */
.converter-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 26px; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.07), 0 12px 40px rgba(0,0,0,.05); }
.converter-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--orange) 0%, rgba(255,80,0,.1) 100%); border-radius: var(--r) var(--r) 0 0; }
.btn-convert { background: var(--orange); border: none; color: #fff; font-weight: 700; font-size: .84rem; padding: 12px 20px; border-radius: 9px; width: 100%; cursor: pointer; transition: background var(--tr), transform var(--tr), box-shadow var(--tr); display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-convert:hover:not(:disabled) { background: var(--orange-h); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255,80,0,.3); }
.btn-convert:disabled { opacity: .45; cursor: not-allowed; }


/* ═══ ImageText/Extract ═══ */
.lang-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.lang-chip { padding: 5px 12px; border-radius: 100px; font-size: .72rem; font-weight: 700; border: 1px solid #e0dbd6; background: #f4f2f0; color: var(--sub); cursor: pointer; transition: all var(--tr); }
.lang-chip.active { background: var(--orange); border-color: var(--orange); color: #fff; }
#resultbox { margin-top: 16px; }
.text-panel-body { padding: 14px; }
.extracted-text { white-space: pre-wrap; font-size: .8rem; line-height: 1.7; color: var(--ink); font-family: 'Courier New', monospace; max-height: 320px; overflow-y: auto; }
.char-count { font-size: .68rem; color: var(--sub); margin-top: 8px; }
.text-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.btn-copy { display: inline-flex; align-items: center; gap: 6px; background: var(--orange-d); border: 1px solid var(--orange-b); color: var(--orange); font-size: .78rem; font-weight: 700; padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: all var(--tr); }
.btn-copy:hover { background: var(--orange); color: #fff; }
.btn-download-txt { display: inline-flex; align-items: center; gap: 6px; background: var(--teal-d); border: 1px solid rgba(14,92,86,.25); color: var(--teal); font-size: .78rem; font-weight: 700; padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: all var(--tr); text-decoration: none; }
.btn-download-txt:hover { background: var(--teal); color: #fff; }


/* ═══ ImageWatermark/TextWatermark & PDF/AddWatermark ═══ */
.editor-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 26px; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.07), 0 12px 40px rgba(0,0,0,.05); }
.editor-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--teal) 0%, rgba(14,92,86,.1) 100%); border-radius: var(--r) var(--r) 0 0; }
.editor-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
.canvas-wrap { background: #f0ede9; border-radius: var(--r2); overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 280px; }
.canvas-note { font-size: .7rem; color: var(--sub); text-align: center; padding: 16px; }
canvas { max-width: 100%; display: block; }
.controls-col { display: flex; flex-direction: column; gap: 14px; }
.cv-field { margin-bottom: 14px; }
.range-row { display: flex; align-items: center; gap: 10px; }
.range-row input[type=range] { flex: 1; -webkit-appearance: none; height: 3px; background: #e8e4e0; border-radius: 100px; outline: none; cursor: pointer; }
.range-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); cursor: pointer; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(255,80,0,.3); }
.range-val { font-size: .75rem; font-weight: 700; color: var(--orange); min-width: 36px; text-align: right; }
.color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-apply { background: var(--orange); border: none; color: #fff; font-weight: 700; font-size: .84rem; padding: 11px 20px; border-radius: 9px; width: 100%; cursor: pointer; transition: background var(--tr), transform var(--tr), box-shadow var(--tr); display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-apply:hover { background: var(--orange-h); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255,80,0,.3); }
@media (max-width: 700px) { .editor-layout { grid-template-columns: 1fr; } }


/* ═══ PDF/CompressPdf ═══ */
.size-info { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.si-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sub); margin-bottom: 3px; }
.si-val { font-size: 1rem; font-weight: 800; color: var(--ink); }
.si-reduce { font-size: .72rem; color: var(--ok); font-weight: 700; }


/* ═══ PDF/ExtractPdf ═══ */
.text-panel { border: 1px solid #e8e4e0; border-radius: var(--r2); overflow: hidden; margin-top: 14px; }
.text-panel-head { background: #f4f2f0; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; }
.text-panel-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sub); }


/* ═══ PDF/PdfToImage ═══ */
.pages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 20px; }
.page-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.page-card-head { padding: 8px 12px; background: #f4f2f0; display: flex; align-items: center; justify-content: space-between; }
.page-label { font-size: .7rem; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .07em; }
.page-dim { font-size: .65rem; color: #a09b96; }
.page-img { width: 100%; display: block; }
.page-dl-btn { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--teal); color: #fff; font-size: .75rem; font-weight: 700; padding: 8px; text-decoration: none; transition: background var(--tr); }
.page-dl-btn:hover { background: #0a4440; color: #fff; }
.btn-download-all { display: inline-flex; align-items: center; gap: 8px; background: var(--teal); color: #fff; border: none; font-weight: 700; font-size: .84rem; padding: 11px 22px; border-radius: 9px; text-decoration: none; width: 100%; justify-content: center; transition: background var(--tr), transform var(--tr), box-shadow var(--tr); margin-top: 12px; cursor: pointer; }
.btn-download-all:hover { background: #0a4440; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14,92,86,.28); }
@media (max-width: 576px) { .pages-grid { grid-template-columns: 1fr; } }


/* ═══ PDF/SplitPdf ═══ */
.cv-hint { font-size: .66rem; color: var(--sub); margin-top: 4px; }


/* ═══ QR/QRGenerator ═══ */
.qr-preview { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 20px; }
.qr-img-wrap { background: #f4f2f0; border: 1px solid #e8e4e0; border-radius: var(--r2); padding: 18px; display: inline-flex; align-items: center; justify-content: center; }
.qr-img-wrap img { max-width: 220px; border-radius: 6px; display: block; }


/* ═══ QR/Read (Scanner + Barcode) ═══ */
.scan-result { border: 1px solid #e8e4e0; border-radius: var(--r2); overflow: hidden; margin-top: 16px; }
.scan-result-head { background: #f4f2f0; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; }
.scan-result-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sub); }
.scan-result-body { display: flex; gap: 16px; padding: 14px; }
.scan-img { width: 120px; height: 120px; flex-shrink: 0; border-radius: 8px; border: 1px solid #e8e4e0; object-fit: contain; background: #f9f8f7; }
.scan-text { flex: 1; font-family: 'Courier New', monospace; font-size: .78rem; color: var(--ink); background: #f9f8f7; border-radius: 8px; padding: 12px; white-space: pre-wrap; line-height: 1.6; border: 1px solid #ece9e6; min-height: 90px; }
.barcode-img-wrap { background: #f4f2f0; border: 1px solid #e8e4e0; border-radius: var(--r2); padding: 18px; }
.barcode-img-wrap img { max-width: 320px; border-radius: 6px; display: block; }
@media (max-width: 576px) { .scan-result-body { flex-direction: column; } .scan-img { width: 100%; height: auto; } }


/* ═══ URL/Capture ═══ */
.cv-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 28px 24px; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.07), 0 12px 40px rgba(0,0,0,.05); }
.cv-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--orange) 0%, rgba(255,80,0,.1) 100%); border-radius: var(--r) var(--r) 0 0; }
.cv-check-row { display: flex; align-items: center; gap: 9px; padding: 10px 14px; background: #f4f2f0; border: 1px solid #e8e4e0; border-radius: 9px; cursor: pointer; user-select: none; }
.cv-check-row input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--orange); cursor: pointer; flex-shrink: 0; }
.cv-check-label { font-size: .82rem; font-weight: 600; color: var(--sub); cursor: pointer; }
.cv-select-arrow { width: 100%; background: var(--card); border: 1px solid #e0dbd6; border-radius: 9px; padding: 10px 14px; color: var(--ink); font-size: .88rem; font-family: 'Roboto', sans-serif; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236B6560' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; transition: border-color var(--tr), box-shadow var(--tr); }
.cv-select-arrow:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,80,0,.1); }
.prog-label { font-size: .72rem; color: var(--sub); text-align: center; min-height: 16px; }
.btn-primary-cv { background: var(--orange); color: #fff; width: 100%; }
.btn-primary-cv:hover { background: var(--orange-h); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255,80,0,.28); }
.btn-primary-cv:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.preview-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.07); display: none; margin-top: 20px; }
.preview-card::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--teal) 0%, rgba(14,92,86,.1) 100%); }
.preview-head { padding: 14px 18px; border-bottom: 1px solid #e8e4e0; display: flex; align-items: center; justify-content: space-between; }
.preview-head-title { font-size: .82rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.preview-head-title i { color: var(--teal); }
.preview-open { font-size: .75rem; color: var(--teal); text-decoration: none; font-weight: 600; }
.preview-open:hover { text-decoration: underline; }
.preview-canvas { max-height: 65vh; overflow-y: auto; overflow-x: hidden; }
.preview-canvas img { width: 100%; height: auto; display: block; cursor: zoom-in; }
.toast-box { position: fixed; top: 24px; right: 24px; z-index: 2000; display: none; padding: 13px 18px; border-radius: 11px; font-size: .84rem; font-weight: 600; color: #fff; backdrop-filter: blur(8px); box-shadow: 0 8px 28px rgba(0,0,0,.18); max-width: 320px; }
.toast-box.ok  { background: rgba(46,125,79,.93); }
.toast-box.err { background: rgba(193,64,31,.93); }


/* ═══ Shared/Components/SubscriptionMenu/Mobile ═══ */
.m-link { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; font-size:.84rem; font-weight:500; color:var(--sub); text-decoration:none; transition:background .13s,color .13s; }
.m-link:hover, .m-link.active-link { background:rgba(255,107,26,.09); color:#FF6B1A; }
.m-link i { width:18px; text-align:center; font-size:.78rem; color:#FF6B1A; flex-shrink:0; }
.m-section-toggle { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:10px; font-size:.84rem; font-weight:600; color:var(--sub); cursor:pointer; transition:background .13s,color .13s; user-select:none; }
.m-section-toggle:hover, .m-section-toggle.active-section { background:rgba(255,107,26,.09); color:#FF6B1A; }
.m-section-toggle .m-toggle-left { display:flex; align-items:center; gap:10px; }
.m-section-toggle .m-toggle-left i { width:18px; text-align:center; font-size:.78rem; color:#FF6B1A; }
.m-section-toggle .m-chevron { font-size:.65rem; opacity:.5; transition:transform .2s; }
.m-section-toggle.open .m-chevron { transform:rotate(180deg); opacity:.9; }
.m-sub { display:none; padding-left:12px; border-left:2px solid rgba(255,107,26,.2); margin:2px 14px 4px; }
.m-sub.open { display:flex; flex-direction:column; gap:1px; }
.m-sub .m-link { font-size:.81rem; padding:8px 10px; }
.m-divider { height:1px; background:var(--border-light,rgba(255,255,255,.06)); margin:6px 14px; }
.m-section-label { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); padding:10px 14px 2px; }
.m-user-row { display:flex; align-items:center; gap:10px; padding:10px 14px; }
.m-avatar { width:32px; height:32px; border-radius:9px; background:#FF6B1A; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:800; color:#fff; flex-shrink:0; }
.m-user-info { display:flex; flex-direction:column; gap:1px; min-width:0; }
.m-user-name { font-size:.8rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.m-user-meta { display:flex; align-items:center; gap:6px; }

/* ═══ Home — auto-generated share QR (below 6-digit code boxes) ═══ */
.qr-share { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:14px; padding:14px; background:rgba(255,80,0,.04); border:1px dashed rgba(255,80,0,.28); border-radius:12px; }
.qr-share img { width:160px; height:160px; background:#fff; padding:8px; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.qr-share-caption { font-size:.7rem; font-weight:600; color:var(--sub); letter-spacing:.05em; text-transform:uppercase; }
.qr-share-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
html[data-theme="dark"] .qr-share { background:rgba(255,107,26,.08); border-color:rgba(255,107,26,.35); }

/* ═══ Home — QR upload button in Receive card ═══ */
.qr-scan-row { display:flex; justify-content:center; margin-top:10px; }
.qr-scan-btn { display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px dashed var(--border); color:var(--sub); font-size:.78rem; font-weight:600; padding:8px 14px; border-radius:8px; cursor:pointer; transition:all .15s; }
.qr-scan-btn:hover:not(:disabled) { border-color:var(--orange); color:var(--orange); background:rgba(255,80,0,.05); }
.qr-scan-btn:disabled { opacity:.6; cursor:wait; }
html[data-theme="dark"] .qr-scan-btn { border-color:var(--border); color:var(--sub); }
html[data-theme="dark"] .qr-scan-btn:hover:not(:disabled) { background:rgba(255,107,26,.1); border-color:#FF6B1A; color:#FF6B1A; }