.gen-card,.gen-card *{box-sizing:border-box}
.gen-card{background:#161616;border:1px solid #2a2a2a;border-radius:14px;overflow:hidden;margin-bottom:16px}

.gen-header{background:#1a1a1a;padding:14px 18px;border-bottom:1px solid #222;display:flex;align-items:center;gap:10px}
.gen-header h2{font-size:15px;font-weight:600;color:#fff;letter-spacing:.3px;margin:0}
.badge-ffcp{background:#ffb800;color:#000;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.5px}

.preview-area{background:#111;padding:14px 18px;min-height:56px;font-size:15px;line-height:1.6;word-break:break-all;border-bottom:1px solid #1e1e1e;color:#fff}
.preview-area .ph{color:#444;font-style:italic;font-size:14px}

.counter-row{display:flex;justify-content:space-between;align-items:center;padding:8px 18px 6px;font-size:12px;color:#666}
.counter-row span{font-weight:600}
.counter-row .cnt-ok{color:#4ade80}
.counter-row .cnt-warn{color:#fb923c}
.counter-row .cnt-over{color:#f87171}

.progress-bar{height:3px;background:#1e1e1e;margin:0 18px 10px}
.progress-fill{height:100%;background:#4ade80;border-radius:2px;transition:width .2s,background .2s;width:0%}

textarea#bioInput{width:100%;background:#111;border:none;border-top:1px solid #1e1e1e;color:#fff;font-size:14px;padding:12px 18px;resize:none;outline:none;font-family:inherit;min-height:64px;line-height:1.6}
textarea#bioInput::placeholder{color:#333}

.btn-copy-main{display:block;width:calc(100% - 36px);margin:10px 18px 14px;background:#ffb800;color:#000;border:none;border-radius:8px;padding:11px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s;letter-spacing:.3px}
.btn-copy-main:hover{opacity:.88}
.btn-copy-main:active{opacity:.75;transform:scale(.99)}

.tools-row{display:flex;flex-wrap:wrap;gap:6px;padding:10px 18px 14px;border-top:1px solid #1e1e1e}
.tool-btn{background:#1e1e1e;border:1px solid #2a2a2a;color:#ccc;border-radius:6px;padding:5px 11px;font-size:12px;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap}
.tool-btn:hover{background:#2a2a2a;color:#fff}
.tool-btn.active{background:#ffb800;color:#000;border-color:#ffb800;font-weight:600}
.tool-btn.danger{color:#f87171}
.tool-btn.danger:hover{background:#2a1a1a;color:#fca5a5}

.tab-bar{display:flex;border-bottom:1px solid #222}
.tab{flex:1;padding:10px;text-align:center;font-size:12px;font-weight:600;cursor:pointer;color:#555;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;background:none;border-top:none;border-left:none;border-right:none}
.tab.active{color:#ffb800;border-bottom-color:#ffb800}
.tab:hover{color:#aaa}

.panel{display:none;padding:14px 18px}
.panel.active{display:block}

.cores-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:6px}
.cor-btn{width:36px;height:36px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:transform .1s,border-color .1s}
.cor-btn:hover{transform:scale(1.15);border-color:#fff}
.cor-btn.selected{border-color:#ffb800}

.simbolos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:5px}
.sim-btn{background:#1a1a1a;border:1px solid #252525;border-radius:6px;padding:7px 4px;text-align:center;font-size:16px;cursor:pointer;transition:background .1s,transform .1s;line-height:1;color:#fff;}
.sim-btn:hover{background:#252525;transform:scale(1.1)}

.fontes-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fonte-btn{background:#1a1a1a;border:1px solid #252525;border-radius:7px;padding:9px 12px;cursor:pointer;transition:background .1s;text-align:left}
.fonte-btn:hover{background:#252525}
.fonte-btn .label{font-size:10px;color:#555;display:block;margin-bottom:3px;font-family:'Segoe UI',sans-serif}
.fonte-btn .preview{font-size:14px;color:#ddd;display:block;word-break:break-all}

.frases-section{margin-bottom:16px}
.frases-section h4{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#555;margin-bottom:8px;font-weight:600}
.frases-list{display:flex;flex-direction:column;gap:4px}
.frase-item{background:#1a1a1a;border:1px solid #252525;border-radius:7px;padding:9px 12px;cursor:pointer;transition:background .12s,border-color .12s;display:flex;justify-content:space-between;align-items:center}
.frase-item:hover{background:#222;border-color:#3a3a3a}
.frase-item .frase-text{font-size:13px;color:#ccc;flex:1;word-break:break-all}
.frase-item .frase-action{font-size:10px;color:#555;margin-left:10px;white-space:nowrap;flex-shrink:0}

.ideias-strip{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;border-top:1px solid #1e1e1e}
.ideia-card{background:#1a1a1a;border:1px solid #252525;border-radius:8px;padding:8px 12px;text-decoration:none;display:flex;align-items:center;gap:6px;transition:background .12s,border-color .12s;flex:1;min-width:120px}
.ideia-card:hover{background:#222;border-color:#3a3a3a;text-decoration:none}
.ideia-card .ic{font-size:16px}
.ideia-card .ic-text{font-size:11px;color:#aaa;font-weight:500;line-height:1.3}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:#4ade80;color:#000;font-size:13px;font-weight:700;padding:10px 22px;border-radius:30px;z-index:9999;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.warn{background:#fb923c}

.panel-scroll{max-height:300px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2a2a2a #111}
.panel-scroll::-webkit-scrollbar{width:4px}
.panel-scroll::-webkit-scrollbar-track{background:#111}
.panel-scroll::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:2px}

.section-label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#444;font-weight:600;margin:10px 0 8px;display:block}

.color-hex-input{display:flex;gap:8px;margin-bottom:12px;align-items:center}
.color-hex-input input[type=color]{width:40px;height:34px;border:1px solid #2a2a2a;border-radius:6px;background:#1a1a1a;cursor:pointer;padding:2px}
.color-hex-input input[type=text]{flex:1;background:#1a1a1a;border:1px solid #2a2a2a;color:#ccc;border-radius:6px;padding:6px 10px;font-size:13px;font-family:monospace;outline:none}
.color-hex-input button{background:#2a2a2a;border:1px solid #333;color:#ccc;border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer}
.color-hex-input button:hover{background:#333}

.quickbar-card{overflow:hidden;border:1px solid #e8e8e8!important;border-left:4px solid #ffb800!important;border-radius:8px!important;background:#fff!important;box-shadow:none!important}
.quickbar-card .card-body{padding:12px 14px!important}
.quickbar-card p{color:#555!important;margin-bottom:8px!important;font-size:12px!important}
.quickbar-scroll{max-width:100%;display:flex;gap:0!important;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding:0 0 6px;background:transparent!important}
.quickbar-scroll .btn{flex:0 0 auto;white-space:nowrap;border:0!important;border-radius:0!important;background:transparent!important;color:#222!important;padding:4px 10px!important;font-size:12px!important;line-height:1.25!important;font-weight:700!important;box-shadow:none!important;text-transform:none!important;border-right:1px solid #e5e5e5!important}
.quickbar-scroll .btn:first-child{padding-left:0!important}
.quickbar-scroll .btn:last-child{border-right:0!important}
.quickbar-card .btn-warning{color:#b17400!important}
.quickbar-card .btn-outline-secondary{color:#666!important}
.quickbar-scroll .btn:hover{color:#b17400!important;text-decoration:underline!important}
.quickbar-scroll::-webkit-scrollbar{height:4px}
.quickbar-scroll::-webkit-scrollbar-track{background:#eee;border-radius:999px}
.quickbar-scroll::-webkit-scrollbar-thumb{background:#ffb800;border-radius:999px}
.js-bio-copy.is-copied{background:#198754!important;border-color:#198754!important;color:#fff!important}
.js-symbol-copy.is-copied{background:#ffb800!important;border-color:#ffb800!important;color:#111!important}
.card .js-bio-copy:not(.js-symbol-copy){background:#ffb800!important;border:1px solid #ffb800!important;color:#111!important;border-radius:6px!important;min-height:38px;font-weight:800!important;box-shadow:0 2px 0 rgba(0,0,0,.12)!important}
.card .js-bio-copy:not(.js-symbol-copy):hover{background:#f2aa00!important;border-color:#f2aa00!important;color:#111!important}
.card .js-bio-copy:not(.js-symbol-copy):active{transform:translateY(1px);box-shadow:none!important}
section>p.text-center .btn-outline-warning,section>p.mt-2.text-center .btn-outline-warning{background:#fff!important;border:1px solid #ffb800!important;color:#9a6700!important;border-radius:6px!important;font-weight:700!important;padding:8px 12px!important;white-space:normal}
section>p.text-center .btn-outline-warning:hover,section>p.mt-2.text-center .btn-outline-warning:hover{background:#ffb800!important;color:#111!important;text-decoration:none!important}
#ferramentas-bio-ff .card .btn{min-height:40px;border-radius:6px!important;font-weight:800!important;display:flex!important;align-items:center;justify-content:center;text-align:center;white-space:normal;padding:8px 12px!important}
#ferramentas-bio-ff .card .btn-outline-warning,#ferramentas-bio-ff .card .btn-outline-secondary{background:#fff7df!important;border:1px solid #ffb800!important;color:#7a5200!important}
#ferramentas-bio-ff .card .btn-outline-warning:hover,#ferramentas-bio-ff .card .btn-outline-secondary:hover{background:#ffb800!important;color:#111!important;text-decoration:none!important}
#ferramentas-bio-ff .card .btn-warning{background:#ffb800!important;border-color:#ffb800!important;color:#111!important;box-shadow:0 2px 0 rgba(0,0,0,.12)!important}
@media (min-width:768px){
  .quickbar-scroll{flex-wrap:wrap!important;overflow-x:visible;padding-bottom:0}
}

@media (max-width:767.98px){
  .quickbar-card{margin-left:0;margin-right:0}
  .quickbar-scroll{padding-bottom:8px}
}