*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:system-ui,sans-serif;background:linear-gradient(135deg,#f0f4f8,#d9e2ec);min-height:100vh;color:#1e293b}
.container{max-width:1200px;margin:0 auto;padding:6px}
.ad-top{background:#fff;border:1px dashed #cbd5e1;border-radius:8px;padding:8px;text-align:center;margin-bottom:8px;min-height:60px}
.layout{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:1024px){.layout{grid-template-columns:160px 1fr 160px}.ad-side{display:flex;align-items:center;justify-content:center;background:#fff;border:1px dashed #cbd5e1;border-radius:8px;min-height:350px;font-size:.75em;color:#94a3b8}}
header{text-align:center;margin-bottom:4px}
header h1{font-size:1.3em;color:#4f46e5;margin-bottom:2px}
header p{font-size:.8em;color:#64748b}
.workspace{background:#fff;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,.1);overflow:hidden;margin-bottom:6px}
.composer{background:#fffbeb;border-bottom:2px solid #fcd34d;padding:8px}
.composer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.composer h2{color:#b45309;font-size:.9em}
.composer-counter{font-size:.7em;color:#92400e;background:rgba(255,255,255,.7);padding:2px 6px;border-radius:8px}
.composer textarea{width:100%;min-height:40px;padding:6px;border:2px solid #fde68a;border-radius:6px;font-size:.9em;resize:vertical;font-family:inherit}
.composer textarea:focus{border-color:#f59e0b;outline:none}
.composer-actions{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.btn{flex:1;min-width:75px;padding:5px;border:none;border-radius:5px;cursor:pointer;font-weight:600;font-size:.72em;touch-action:manipulation;transition:all .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn-primary{background:#f59e0b;color:#fff}
.btn-secondary{background:#64748b;color:#fff}
.btn-danger{background:#ef4444;color:#fff}
.btn-whatsapp{background:#25d366;color:#fff}
.btn-whatsapp:hover{background:#128c7e}

/* BARRA DE NAVEGAÇÃO (tabs) - igual ao site original */
.tabs{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-bottom:1px solid #e2e8f0;padding:8px 6px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:center}
.tab{background:#fff;border:1.5px solid #e2e8f0;color:#475569;padding:6px 10px;border-radius:20px;cursor:pointer;font-size:.72em;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;touch-action:manipulation;min-height:30px;transition:all .2s ease;box-shadow:0 1px 2px rgba(0,0,0,.04);line-height:1;text-decoration:none}
.tab:hover{border-color:#4f46e5;color:#4f46e5;transform:translateY(-1px);box-shadow:0 3px 6px rgba(79,70,229,.15)}
.tab:active{transform:translateY(0) scale(.97)}
.tab.active{background:#fff;border:2px solid #4f46e5;color:#4f46e5;font-weight:600;box-shadow:0 2px 6px rgba(79,70,229,.2)}
.tab .tab-icon{font-size:1em;line-height:1;display:inline-flex;align-items:center;justify-content:center}

/* CARDS DO INDEX - pequenos, parecidos com tabs */
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;padding:12px}
.category-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:20px;padding:8px 12px;text-align:center;text-decoration:none;color:#475569;transition:all .2s;box-shadow:0 1px 2px rgba(0,0,0,.04);display:flex;align-items:center;justify-content:center;gap:6px;font-size:.75em;font-weight:500;min-height:34px;white-space:nowrap}
.category-card:hover{border-color:#4f46e5;color:#4f46e5;transform:translateY(-1px);box-shadow:0 3px 6px rgba(79,70,229,.15)}
.category-card .category-icon{font-size:1.1em;line-height:1}
.category-card .category-name{font-weight:500}

.breadcrumb{padding:8px 12px;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:.8em}
.breadcrumb a{color:#4f46e5;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.panel{padding:8px}
.search{margin-bottom:6px;position:relative}
.search input{width:100%;padding:7px 10px 7px 30px;border:2px solid #e2e8f0;border-radius:6px;font-size:.88em}
.search input:focus{border-color:#4f46e5;outline:none}
.search::before{content:"🔍";position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:.8em}
.recent{display:none;margin-bottom:6px;padding:6px;background:#f1f5f9;border-radius:6px}
.recent.has-items{display:block}
.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:4px}
.recent-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:5px 2px;text-align:center;cursor:pointer;font-size:1.4em;min-height:48px;display:flex;flex-direction:column;justify-content:center;align-items:center;touch-action:manipulation;user-select:none}
.recent-item:hover{background:#4f46e5;border-color:#4f46e5}
.recent-item:hover .label{color:#fff}
.recent-item:active{transform:scale(.95)}
.recent-item .label{font-size:.32em;color:#64748b;margin-top:2px;pointer-events:none;line-height:1.1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:4px}
.item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:5px 2px;text-align:center;cursor:pointer;font-size:1.4em;min-height:48px;display:flex;flex-direction:column;justify-content:center;align-items:center;touch-action:manipulation;user-select:none}
.item:hover{background:#4f46e5;border-color:#4f46e5}
.item:hover .label{color:#fff}
.item:active{transform:scale(.95)}
.label{font-size:.32em;color:#64748b;margin-top:2px;pointer-events:none;line-height:1.1}
.grid-frases{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:3px}
.grid-frases .item{min-height:auto;padding:6px;font-size:.82em;text-align:left;justify-content:flex-start;line-height:1.3}
.grid-frases .item .label{display:none}
.category{display:none}
.category.active{display:block}
.category-title{color:#4f46e5;font-size:.9em;margin-bottom:4px;padding:10px 12px;border-bottom:2px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center}
.category-title small{font-size:.62em;color:#94a3b8}
.badge{background:#dc2626;color:#fff;font-size:.55em;padding:2px 6px;border-radius:10px;font-weight:600}
.sub-title{color:#dc2626;font-size:.75em;margin:10px 12px 6px;padding-bottom:2px;border-bottom:1px dashed #fca5a5;font-weight:700}
footer{text-align:center;color:#64748b;padding:8px;font-size:.78em}
.toast{position:fixed;bottom:12px;left:50%;transform:translateX(-50%) translateY(100px);background:#22c55e;color:#fff;padding:8px 18px;border-radius:50px;opacity:0;transition:all .3s;z-index:2000;pointer-events:none;font-size:.82em}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
@media(max-width:768px){.category-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.tabs{padding:6px 4px;gap:4px}.tab{padding:5px 8px;font-size:.68em;min-height:28px}.grid,.recent-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:3px}.item,.recent-item{min-height:42px;font-size:1.25em}.label,.recent-item .label{font-size:.3em}.grid-frases{grid-template-columns:1fr}.btn{min-width:65px;font-size:.68em}.container{padding:5px}}
@media(max-width:480px){header h1{font-size:1.15em}.grid,.recent-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}.item,.recent-item{min-height:38px;font-size:1.15em}.label,.recent-item .label{font-size:.28em}.tab{padding:4px 7px;font-size:.64em;min-height:26px}.composer-actions{gap:3px}.btn{padding:4px;font-size:.66em}.category-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}