* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',sans-serif; background:linear-gradient(135deg,#263238,#37474f); min-height:100vh; padding:15px; }
.container { max-width:980px; margin:10px auto; background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden; }
.header { background:linear-gradient(135deg,#263238,#546e7a); color:#fff; padding:15px 20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.header h2 { font-size:18px; }
.header-right { display:flex; gap:8px; flex-wrap:wrap; }
.btn-back { background:rgba(255,255,255,.2); color:#fff; border:2px solid #fff; padding:7px 13px; border-radius:6px; font-weight:600; font-size:13px; text-decoration:none; }
.btn-add { background:#fff; color:#37474f; border:none; padding:8px 16px; border-radius:8px; font-weight:700; font-size:13px; cursor:pointer; }
.content { padding:18px 20px; }
.tip-box { background:#e8f5e9; border-radius:8px; padding:11px 15px; margin-bottom:15px; font-size:13px; color:#1b5e20; }
.seed-box { background:#fff8e1; border:2px solid #ffc107; border-radius:10px; padding:14px; margin-bottom:15px; text-align:center; }

/* Lista empresas */
.emp-list { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.emp-card { border-radius:16px; overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,0.08); transition:transform 0.2s,box-shadow 0.2s; background:white; }
.emp-card:hover { transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,0.13); }
.emp-card.principal { box-shadow:0 4px 20px rgba(38,50,56,0.22); outline:3px solid #263238; }
.emp-card-top { padding:18px 18px 14px; position:relative; min-height:100px; display:flex; flex-direction:column; justify-content:flex-end; }
.emp-card-top-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent,rgba(0,0,0,0.32)); }
.logo-circle { width:52px; height:52px; border-radius:50%; border:2px solid rgba(255,255,255,0.6); display:flex; align-items:center; justify-content:center; font-size:22px; color:white; margin-bottom:8px; position:relative; z-index:1; overflow:hidden; background:rgba(255,255,255,0.15); backdrop-filter:blur(4px); flex-shrink:0; }
.logo-circle img { width:100%; height:100%; object-fit:contain; border-radius:50%; }
.emp-card-nome { font-size:15px; font-weight:800; color:white; position:relative; z-index:1; text-shadow:0 1px 4px rgba(0,0,0,0.4); line-height:1.3; user-select:text; cursor:text; }
.emp-card-subtipo { font-size:11px; font-weight:600; color:rgba(255,255,255,0.82); position:relative; z-index:1; margin-top:3px; user-select:text; cursor:text; }
.badge-principal { position:absolute; top:12px; right:12px; z-index:2; background:#ffd600; color:#263238; font-size:10px; font-weight:800; padding:3px 10px; border-radius:20px; box-shadow:0 2px 6px rgba(0,0,0,0.2); user-select:none; }
.emp-card-body { padding:14px 16px; user-select:text; cursor:text; }
.info-line { display:flex; align-items:flex-start; gap:8px; padding:7px 0; border-bottom:1px solid #f5f5f5; }
.info-line:last-child { border-bottom:none; }
.info-icon { font-size:14px; flex-shrink:0; margin-top:1px; }
.info-content { flex:1; min-width:0; }
.info-label { font-size:10px; color:#aaa; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; display:block; margin-bottom:2px; }
.info-text { font-size:13px; color:#222; font-weight:500; word-break:break-word; line-height:1.4; }
.emp-card-actions { padding:10px 14px; background:#f8f9fa; border-top:1px solid #f0f0f0; display:flex; gap:6px; user-select:none; }
.btn-edit-emp { flex:1; background:#263238; color:white; border:none; border-radius:8px; padding:9px; font-size:12px; font-weight:700; cursor:pointer; text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center; }

/* Abas internas */
.emp-body { display:none; border-top:1px solid #e0e0e0; }
.emp-body.open { display:block; }
.emp-tabs { display:flex; overflow-x:auto; background:#f5f7f8; border-bottom:2px solid #e0e0e0; gap:0; }
.emp-tab { padding:10px 14px; font-size:12px; font-weight:700; color:#888; border:none; background:none; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:all .2s; flex-shrink:0; }
.emp-tab.active { color:#37474f; border-bottom-color:#546e7a; background:#fff; }
.emp-tab-content { display:none; padding:16px; }
.emp-tab-content.active { display:block; }

/* Grid de info */
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.info-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.info-item { background:#f9fafb; border-radius:8px; padding:9px 12px; }
.info-item .key { font-size:10px; font-weight:700; color:#9e9e9e; text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.info-item .val { font-size:13px; color:#222; font-weight:500; word-break:break-word; }
.info-item .val.empty { color:#ccc; font-style:italic; }
.info-full { grid-column:1/-1; }

/* Botões de ação */
.tab-actions { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.btn-edit-tab { background:#546e7a; color:#fff; border:none; padding:8px 16px; border-radius:7px; font-weight:600; cursor:pointer; font-size:12px; }
.btn-add-item { background:#2e7d32; color:#fff; border:none; padding:8px 16px; border-radius:7px; font-weight:600; cursor:pointer; font-size:12px; }
.btn-del-item { background:#ef5350; color:#fff; border:none; padding:6px 12px; border-radius:6px; font-weight:600; cursor:pointer; font-size:11px; }

/* Cards de lista (sócios, documentos, etc) */
.list-cards { display:grid; gap:10px; }
.list-card { border:1px solid #e0e0e0; border-radius:9px; padding:12px; position:relative; }
.list-card-title { font-size:13px; font-weight:700; color:#333; margin-bottom:6px; }
.list-card-sub { font-size:12px; color:#666; line-height:1.6; }
.list-card-actions { position:absolute; top:10px; right:10px; display:flex; gap:5px; }
.badge-socio { display:inline-block; font-size:10px; padding:2px 8px; border-radius:8px; font-weight:700; margin-left:6px; }
.badge-manager { background:#e3f2fd; color:#1565c0; }
.badge-member { background:#e8f5e9; color:#1b5e20; }
.badge-owner { background:#f3e5f5; color:#6a1b9a; }
.credential-card { border:1px solid #e0e0e0; border-radius:9px; padding:12px; }
.cred-title { font-size:13px; font-weight:700; color:#333; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
.cred-row { display:flex; justify-content:space-between; font-size:12px; padding:5px 0; border-bottom:1px solid #f5f5f5; }
.cred-key { color:#888; font-weight:600; }
.cred-val { color:#222; word-break:break-all; text-align:right; }
.cred-val.senha { font-family:monospace; background:#f5f5f5; padding:2px 8px; border-radius:4px; }
.toggle-senha { cursor:pointer; font-size:11px; color:#546e7a; margin-left:6px; }
.doc-card { border:1px solid #e0e0e0; border-radius:9px; padding:12px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.doc-info .doc-nome { font-size:13px; font-weight:700; color:#333; }
.doc-info .doc-desc { font-size:11px; color:#888; margin-top:2px; }
.doc-link { background:#1b5e20; color:#fff; padding:7px 14px; border-radius:7px; font-size:12px; font-weight:700; text-decoration:none; display:inline-block; }
.timeline-item { display:flex; gap:14px; padding:10px 0; border-bottom:1px solid #f0f0f0; }
.timeline-dot { width:12px; height:12px; border-radius:50%; background:#546e7a; flex-shrink:0; margin-top:3px; }
.timeline-dot.importante { background:#e53935; }
.timeline-dot.pendente { background:#ffc107; }
.timeline-date { font-size:11px; color:#888; min-width:80px; font-weight:700; }
.timeline-text { font-size:13px; color:#333; }
.timeline-tag { font-size:10px; font-weight:700; padding:2px 8px; border-radius:8px; display:inline-block; margin-top:3px; }
.tag-abertura { background:#e3f2fd; color:#1565c0; }
.tag-renovacao { background:#fff8e1; color:#f57f17; }
.tag-importante { background:#fdecea; color:#c62828; }
.tag-pendente { background:#fff3e0; color:#e65100; }
.fin-card { border:1px solid #e0e0e0; border-radius:9px; padding:13px; }
.fin-title { font-size:13px; font-weight:700; color:#37474f; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid #f0f0f0; display:flex; justify-content:space-between; }
.empty-tab { text-align:center; padding:30px; color:#bbb; font-size:13px; }

/* Modal / formulário inline */
.modal-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:1000; justify-content:center; align-items:flex-start; padding:20px; overflow-y:auto; }
.modal-overlay.open { display:flex; }
.modal { background:#fff; border-radius:14px; padding:22px; width:100%; max-width:600px; margin:auto; }
.modal h3 { font-size:16px; color:#37474f; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid #eceff1; }
.form-group { margin-bottom:12px; }
.form-group label { display:block; font-size:12px; font-weight:700; color:#555; margin-bottom:5px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:9px 11px; border:2px solid #e0e0e0; border-radius:7px; font-size:13px; font-family:inherit; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:#546e7a; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.modal-btns { display:flex; gap:8px; margin-top:16px; }
.btn-modal-save { flex:1; padding:11px; background:linear-gradient(135deg,#37474f,#546e7a); color:#fff; border:none; border-radius:8px; font-weight:700; cursor:pointer; }
.btn-modal-cancel { padding:11px 18px; background:#9e9e9e; color:#fff; border:none; border-radius:8px; font-weight:700; cursor:pointer; }

/* Ações empresa */
.emp-card-actions { display:flex; gap:8px; padding:12px 16px; background:#fafafa; border-top:1px solid #f0f0f0; }
.btn-edit-emp { flex:1; padding:9px; background:#546e7a; color:#fff; border:none; border-radius:7px; font-weight:600; cursor:pointer; font-size:13px; }
.btn-del-emp { padding:9px 16px; background:#ef5350; color:#fff; border:none; border-radius:7px; font-weight:600; cursor:pointer; font-size:13px; }

/* Botão Payment Card */
.btn-pay-card { padding:9px 11px; background:linear-gradient(135deg,#6d28d9,#a855f7); color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.btn-pay-card:active { transform:scale(0.96); }

/* Modal Payment Card */
.pay-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:2000; justify-content:center; align-items:flex-start; padding:20px; overflow-y:auto; backdrop-filter:blur(4px); }
.pay-modal-overlay.open { display:flex; }
.pay-modal { width:420px; max-width:100%; margin:auto; }
.pay-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.pay-modal-header h3 { color:#fff; font-size:16px; }
.pay-modal-close { background:rgba(255,255,255,.2); color:#fff; border:none; width:36px; height:36px; border-radius:50%; font-size:18px; cursor:pointer; }
.pay-modal-actions { display:flex; gap:8px; margin-top:14px; justify-content:center; flex-wrap:wrap; }
.pay-modal-actions button { padding:10px 18px; border-radius:10px; border:none; font-weight:700; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:6px; }
.btn-share-whats { background:#25d366; color:#fff; }
.btn-save-img { background:#fff; color:#6d28d9; }
.btn-print-card { background:rgba(255,255,255,.2); color:#fff; }

/* Payment Card Design */
.pc-outer { border-radius:28px; padding:4px; background:linear-gradient(135deg,#6d28d9,#a78bfa,#6d28d9); box-shadow:0 25px 60px rgba(109,40,217,0.25); }
.pc-inner { background:#fff; border-radius:24px; overflow:hidden; }
.pc-header { display:flex; justify-content:space-between; align-items:center; padding:24px 28px 8px; }
.pc-header .pc-logo { height:36px; object-fit:contain; }
.pc-header .pc-bank-logo { height:50px; object-fit:contain; }
.pc-company { text-align:center; padding:10px 28px 6px; }
.pc-company h2 { font-size:24px; font-weight:800; color:#1a1035; letter-spacing:-0.5px; }
.pc-phone { text-align:center; padding:8px 28px 6px; }
.pc-phone span { font-family:'JetBrains Mono',monospace; font-size:32px; font-weight:700; color:#1a1035; letter-spacing:2px; word-break:break-all; }
.pc-qr { display:flex; flex-direction:column; align-items:center; padding:10px 28px 14px; }
.pc-qr-box { width:200px; height:200px; border-radius:16px; overflow:hidden; border:3px solid #7c3aed; box-shadow:0 8px 30px rgba(124,58,237,0.15); display:flex; align-items:center; justify-content:center; background:#f5f0ff; }
.pc-qr-box img { width:100%; height:100%; object-fit:cover; }
.pc-qr-box .no-qr { font-size:13px; color:#a78bfa; text-align:center; padding:20px; }
.pc-scan { margin-top:10px; color:#94a3b8; font-size:12px; }
.pc-tag { text-align:center; padding:6px 28px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:14px; color:#64748b; }
.pc-tag-badge { background:linear-gradient(135deg,#7c3aed,#a855f7); color:white; padding:4px 16px; border-radius:20px; font-weight:700; font-size:14px; letter-spacing:0.5px; }
.pc-sep { display:flex; align-items:center; gap:14px; margin:14px 28px; }
.pc-sep-line { flex:1; height:2px; background:linear-gradient(90deg,transparent,#e2d9f3,transparent); }
.pc-sep-label { font-size:12px; font-weight:700; color:#7c3aed; letter-spacing:3px; text-transform:uppercase; }
.pc-wire { padding:0 28px 24px; }
.pc-wire-item { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid #f1eef8; }
.pc-wire-item:last-child { border-bottom:none; }
.pc-wire-item .pc-label { font-size:11px; font-weight:600; color:#a095bd; text-transform:uppercase; letter-spacing:1px; }
.pc-wire-item .pc-value { font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; color:#1a1035; text-align:right; }
.pc-wire-item .pc-value.pc-addr { font-family:'Segoe UI',sans-serif; font-size:13px; font-weight:600; max-width:220px; }
.pc-footer { background:#faf8ff; border-top:1px solid #f1eef8; padding:12px 28px; text-align:center; }
.pc-footer p { font-size:11px; color:#b0a8c8; font-weight:500; }
.pc-no-data { text-align:center; padding:40px 20px; color:#999; font-size:14px; }
.pc-zelle-box { background:#f5f0ff; border:2px solid #ede9fe; border-radius:14px; margin:0 28px 14px; padding:16px; }
.pc-zelle-box .pc-phone { padding:4px 0 6px; }
.pc-zelle-box .pc-phone span { font-family:'Poppins',sans-serif; font-size:18px; font-weight:500; letter-spacing:0; word-break:break-all; }
.pc-zelle-box .pc-qr { padding:8px 0 4px; }
.pc-zelle-box .pc-qr-box { width:150px; height:150px; }
.pc-zelle-box .pc-tag { padding:4px 0; }
.pc-boa-logo { height:32px; object-fit:contain; }

/* QR Upload */
.qr-upload-area { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.qr-preview { width:80px; height:80px; border-radius:10px; border:2px dashed #ccc; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fafafa; flex-shrink:0; }
.qr-preview img { width:100%; height:100%; object-fit:cover; }
.qr-preview .qr-placeholder { font-size:28px; color:#ccc; }
.btn-qr-upload { background:#6d28d9; color:#fff; border:none; padding:8px 14px; border-radius:7px; font-weight:600; cursor:pointer; font-size:12px; }
.btn-qr-remove { background:#ef5350; color:#fff; border:none; padding:8px 14px; border-radius:7px; font-weight:600; cursor:pointer; font-size:12px; }

@media(max-width:600px){ .info-grid,.info-grid-3{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} .pc-company h2{font-size:20px;} .pc-phone span{font-size:26px;} .pc-qr-box{width:170px;height:170px;} .pc-header{padding:20px 22px 6px;} .pc-company,.pc-phone,.pc-tag{padding-left:22px;padding-right:22px;} .pc-sep{margin:10px 22px;} .pc-wire{padding:0 22px 20px;} .pc-footer{padding:10px 22px;} .pc-zelle-box{margin:0 22px 14px;} .pc-zelle-box .pc-phone span{font-family:'Poppins',sans-serif;font-weight:500;font-size:16px;} .pc-zelle-box .pc-qr-box{width:130px;height:130px;} }

        /* Dark Mode */
        body.dark-mode { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
        body.dark-mode .container { background: #0f0f23; color: #e0e0e0; }
        body.dark-mode .header { }
        body.dark-mode .content { color: #e0e0e0; }
        body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: #16213e; color: #e0e0e0; border-color: #333; }
        body.dark-mode .card-item, body.dark-mode .summary-card { border-color: #333; }