/* Shared styles for the connection-string builder tools (MongoDB + SQL). */
.conn-wrap { display:grid; grid-template-columns:1.05fr 0.95fr; gap:28px; align-items:start; }
@media (max-width:900px){ .conn-wrap { grid-template-columns:1fr; } }

.conn-card { background:#fff; border:1px solid rgba(6,78,59,0.10); border-radius:16px; padding:24px;
    box-shadow:0 1px 2px rgba(6,78,59,0.04), 0 12px 28px -16px rgba(6,78,59,0.12); }

.conn-field { margin-bottom:16px; }
.conn-field:last-child { margin-bottom:0; }
.conn-field label { display:block; font-size:.8rem; font-weight:600; color:#334155; margin-bottom:6px; }
.conn-field .hint { font-weight:400; color:#94a3b8; font-size:.72rem; margin-left:6px; }
.conn-input, .conn-select, .conn-textarea {
    width:100%; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:9px; padding:9px 11px;
    font-size:.88rem; color:#0f172a; background:#fff; outline:none; transition:border-color .15s, box-shadow .15s; font-family:inherit; }
.conn-input:focus, .conn-select:focus, .conn-textarea:focus { border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,0.12); }
.conn-textarea { resize:vertical; min-height:64px; font-family:'SFMono-Regular',Consolas,Menlo,monospace; font-size:.8rem; }

.conn-row { display:grid; grid-template-columns:1fr 130px; gap:12px; }
.conn-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.conn-check { display:flex; align-items:center; gap:9px; font-size:.85rem; color:#334155; cursor:pointer; margin-bottom:12px; }
.conn-check input { width:16px; height:16px; accent-color:#10b981; cursor:pointer; }

.conn-section-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#059669; font-weight:700;
    margin:22px 0 12px; padding-top:16px; border-top:1px solid rgba(6,78,59,0.08); }
.conn-section-title:first-child { margin-top:0; padding-top:0; border-top:0; }

/* Engine chips (SQL) */
.conn-engines { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.conn-engine { border:1px solid #cbd5e1; background:#fff; color:#475569; font-size:.82rem; font-weight:600;
    padding:7px 12px; border-radius:9px; cursor:pointer; transition:all .15s; }
.conn-engine:hover { border-color:rgba(16,185,129,0.5); }
.conn-engine.is-active { background:linear-gradient(135deg,#10b981,#059669); color:#fff; border-color:transparent; }

/* Output panel */
.conn-out { position:sticky; top:96px; }
.conn-out-block { margin-bottom:18px; }
.conn-out-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.conn-out-head .name { font-size:.82rem; font-weight:700; color:#064e3b; }
.conn-copy { border:none; background:#eef4f0; color:#059669; font-weight:600; font-size:.76rem; cursor:pointer;
    padding:5px 11px; border-radius:7px; display:inline-flex; align-items:center; gap:6px; transition:background .15s; }
.conn-copy:hover { background:#dcefe6; }
.conn-copy.copied { background:#10b981; color:#fff; }
.conn-uri { background:#0f2a22; border-radius:10px; padding:14px 15px; color:#d1fae5; word-break:break-all;
    font-family:'SFMono-Regular',Consolas,Menlo,monospace; font-size:.82rem; line-height:1.6; white-space:pre-wrap; min-height:20px; }
.conn-uri .tok-scheme { color:#5eead4; }
.conn-uri .tok-at { color:#fcd34d; }
.conn-uri .tok-q { color:#93c5fd; }
.conn-note { font-size:.78rem; color:#64748b; line-height:1.55; margin-top:6px; }
.conn-warn { font-size:.76rem; color:#b45309; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:8px 11px; margin-top:12px; }

/* Collapsible advanced sections */
.conn-details { border:1px solid rgba(6,78,59,0.10); border-radius:11px; margin-top:14px; overflow:hidden; background:#fbfdfc; }
.conn-details > summary { cursor:pointer; list-style:none; padding:11px 14px; font-size:.8rem; font-weight:700; color:#064e3b;
    display:flex; align-items:center; gap:8px; user-select:none; }
.conn-details > summary::-webkit-details-marker { display:none; }
.conn-details > summary::before { content:"›"; font-size:1.1rem; line-height:1; transition:transform .15s; color:#10b981; }
.conn-details[open] > summary::before { transform:rotate(90deg); }
.conn-details > summary:hover { background:#f1f7f4; }
.conn-details > *:not(summary) { padding:0 14px; }
.conn-details > .conn-field:last-child, .conn-details > div:last-child { padding-bottom:14px; }
.conn-details .conn-check { margin-left:14px; }