/* iPiano Members — shared styling, matches the visualizer/homepage dark theme */
* { box-sizing: border-box; }
body {
    background: #0a0a0a; color: #eee; margin: 0;
    font-family: 'Segoe UI', sans-serif;
}
a { color: #00e5ff; }
.wrap { max-width: 920px; margin: 0 auto; padding: 24px 20px 60px; }
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; background: #1a1a1a; border-bottom: 2px solid #333;
}
.topbar a.brand { color: #00e5ff; font-weight: bold; text-decoration: none; font-size: 15px; }
.topbar .who { font-size: 12px; color: #999; }
.topbar .who a { margin-left: 10px; }
h1 { font-size: 22px; color: #fff; margin: 0 0 6px; }
h2 { font-size: 15px; color: #00e5ff; margin: 28px 0 10px; text-transform: uppercase; letter-spacing: .04em; }
p.lead { color: #aaa; margin: 0 0 20px; font-size: 13px; }
.card {
    background: #151515; border: 1px solid #2a2a2a; border-radius: 10px;
    padding: 18px 20px; margin-bottom: 16px;
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
label { display: block; font-size: 11px; color: #999; text-transform: uppercase; margin: 12px 0 4px; font-weight: bold; }
input[type=text], input[type=email], input[type=password], input[type=date], textarea, select {
    width: 100%; background: #111; color: #eee; border: 1px solid #444; border-radius: 6px;
    padding: 9px 10px; font-size: 13px; font-family: inherit;
}
textarea { min-height: 80px; resize: vertical; }
button, .btn {
    display: inline-block; margin-top: 16px; padding: 10px 18px; cursor: pointer;
    background: #00838f; color: #fff; border: none; border-radius: 6px;
    font-size: 13px; font-weight: bold; text-decoration: none;
}
button:hover, .btn:hover { background: #00acc1; }
.btn-ghost { background: #333; }
.btn-ghost:hover { background: #444; }
.btn-danger { background: #b71c1c; }
.btn-danger:hover { background: #d32f2f; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; }
.flash-info { background: #103a4a; border: 1px solid #00acc1; }
.flash-error { background: #4a1010; border: 1px solid #b71c1c; }
.flash-success { background: #103a1a; border: 1px solid #2e7d32; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #2a2a2a; }
th { color: #888; font-size: 11px; text-transform: uppercase; }
.tag { display: inline-block; background: #263238; color: #80deea; border-radius: 10px; padding: 2px 9px; font-size: 10px; font-weight: bold; }
.nav-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 4px; }
.nav-tabs a {
    padding: 8px 14px; border-radius: 6px; background: #1a1a1a; color: #ccc;
    text-decoration: none; font-size: 12px; border: 1px solid #333;
}
.nav-tabs a.active { background: #00838f; color: #fff; border-color: #00838f; }
.muted { color: #777; font-size: 12px; }
.field-error { color: #ff8a80; font-size: 12px; margin-top: 4px; }