.usernc { display: grid; gap: 1rem; }
.usernc-head { align-items: flex-start; }
.usernc-head p:last-child { margin: .35rem 0 0; color: #718096; font-size: .76rem; }
.usernc-status { padding: .35rem .6rem; border: 1px solid #d8e0e8; border-radius: 999px; background: #f6f8fa; color: #66758a; font-size: .66rem; font-weight: 800; }
.usernc-status--ready { border-color: #a7dfc2; background: #ecfdf3; color: #087443; }
.usernc-status--error { border-color: #fecaca; background: #fff1f2; color: #a51d36; }
.usernc-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.usernc-summary-grid article { min-width: 0; display: grid; gap: .25rem; padding: .8rem; border: 1px solid #e1e8ef; border-radius: 9px; background: #fbfcfd; }
.usernc-summary-grid span { color: #8491a2; font-size: .64rem; font-weight: 750; text-transform: uppercase; }
.usernc-summary-grid strong { overflow: hidden; color: #344258; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.usernc-summary { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .65rem; padding: .85rem; border: 1px solid #dbe4eb; border-radius: 9px; background: #f8fafc; }
.usernc-summary > .material-symbols-outlined { color: #64748b; }
.usernc-summary strong { color: #334155; font-size: .76rem; }
.usernc-summary p { margin: .2rem 0 0; color: #718096; font-size: .69rem; }
.usernc-notice { padding: .7rem .8rem; border: 1px solid #dbe4eb; border-radius: 8px; font-size: .7rem; }
.usernc-notice--error { border-color: #fecaca; background: #fff1f2; color: #a51d36; }
.usernc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.usernc-actions form { margin: 0; }
.usernc-primary, .usernc-secondary, .usernc-danger { min-height: 2.35rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: 0 .75rem; border: 1px solid transparent; border-radius: 7px; cursor: pointer; font: 750 .7rem/1 inherit; text-decoration: none; }
.usernc-primary { background: #0f766e; color: #fff; }
.usernc-primary:hover { background: #0b625b; color: #fff; }
.usernc-primary .material-symbols-outlined { font-size: .95rem; }
.usernc-secondary { border-color: #d7e0e8; background: #fff; color: #526176; }
.usernc-danger { border-color: #fecaca; background: #fff5f5; color: #b4233e; }
.usernc-connect { overflow: hidden; border: 1px solid #dfe7ee; border-radius: 10px; background: #fff; }
.usernc-connect summary { padding: .8rem; cursor: pointer; color: #405069; font-size: .73rem; font-weight: 800; }
.usernc-connect[open] summary { border-bottom: 1px solid #edf1f5; }
.usernc-connect form { display: grid; gap: .75rem; padding: .9rem; }
.usernc-connect label { display: grid; gap: .3rem; color: #526176; font-size: .69rem; font-weight: 750; }
.usernc-connect input { width: 100%; height: 2.45rem; padding: 0 .7rem; border: 1px solid #d7e0e8; border-radius: 7px; outline: none; color: #243247; font: .76rem inherit; }
.usernc-connect input:focus { border-color: #66b9b0; box-shadow: 0 0 0 3px rgba(15, 118, 110, .1); }
.usernc-connect small { color: #8491a2; font-size: .62rem; font-weight: 500; }
.usernc-connect button { width: fit-content; }
@media (max-width: 700px) { .usernc-summary-grid { grid-template-columns: 1fr; } .usernc-connect button { width: 100%; } }