.nav-link { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border-radius: .5rem; font-size: .9rem; color: #d4d4d8; }
.nav-link:hover { background: #27272a; color: #fff; }
.nav-link.active { background: #4c1d95; color: #fff; }

.card { background: #18181b; border: 1px solid #27272a; border-radius: .9rem; padding: 1.1rem; transition: border-color .15s; }
.card:hover { border-color: #52525b; }

.btn, .btn-ghost, .btn-danger { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem; border-radius: .55rem; font-size: .875rem; font-weight: 500; cursor: pointer; }
.btn { background: #7c3aed; color: #fff; }
.btn:hover { background: #6d28d9; }
.btn-ghost { border: 1px solid #3f3f46; color: #e4e4e7; }
.btn-ghost:hover { background: #27272a; }
.btn-danger { border: 1px solid #7f1d1d; color: #fca5a5; }
.btn-danger:hover { background: #450a0a; }

.badge { font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: .1rem .4rem; border-radius: .3rem; background: #422006; color: #fcd34d; }
.pill { display: inline-block; padding: .3rem .8rem; border-radius: 999px; border: 1px solid #3f3f46; font-size: .85rem; color: #d4d4d8; }
.pill.active, .pill:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; }

.field { width: 100%; background: #09090b; border: 1px solid #3f3f46; border-radius: .55rem; padding: .55rem .75rem; color: #f4f4f5; }
.field:focus { outline: none; border-color: #8b5cf6; }
.label { display: block; font-size: .85rem; color: #a1a1aa; margin-bottom: .3rem; }

.prompt-box { white-space: pre-wrap; word-break: break-word; background: #09090b; border: 1px solid #27272a; border-radius: .75rem; padding: 1rem; font-size: .92rem; line-height: 1.6; }
.var { background: #3b0764; color: #e9d5ff; border-radius: .25rem; padding: 0 .2rem; }

.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(1rem); opacity: 0; visibility: hidden; background: #059669; color: #fff; padding: .6rem 1.2rem; border-radius: .6rem; transition: all .25s; z-index: 50; }
.toast.show { transform: translateX(-50%); opacity: 1; visibility: visible; }

table.list { width: 100%; font-size: .9rem; }
table.list th { text-align: left; color: #a1a1aa; font-weight: 500; padding: .5rem; border-bottom: 1px solid #27272a; }
table.list td { padding: .5rem; border-bottom: 1px solid #1f1f23; vertical-align: top; }