:root{--ink:#2c3e50;--accent:#e67e22;--danger:#c0392b;--ok:#27ae60;--line:#e6e6e6;--bg:#f4f6f8}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#333;background:var(--bg)}
a{color:#2c6;text-decoration:none}
.layout{display:flex;min-height:100vh}
/* Sidebar */
.sidebar{width:230px;background:var(--ink);color:#fff;display:flex;flex-direction:column;flex-shrink:0}
.brand{font-size:19px;font-weight:bold;padding:20px 22px;border-bottom:1px solid #3b4d5e}
.brand a{color:#fff}
nav{flex:1;padding:10px 0}
.navgroup{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#8fa3b5;padding:14px 22px 4px}
.navitem{display:block;padding:10px 22px;color:#cfd8e0;cursor:pointer;font-size:14px;border-left:3px solid transparent}
.navitem:hover{background:#34495e;color:#fff}
.navitem.active{background:#34495e;color:#fff;border-left-color:var(--accent)}
.signout{padding:16px 22px;border-top:1px solid #3b4d5e;font-size:13px}
.signout a{color:#cfd8e0}
/* Content */
.content{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:14px 28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.topbar .who{font-size:13px;color:#555}
.main{padding:26px 28px;max-width:1000px}
h1{color:var(--ink);font-size:22px;margin:0 0 4px}
h2{color:var(--ink);font-size:16px;margin:22px 0 6px;border-bottom:1px solid var(--line);padding-bottom:4px}
.pill{display:inline-block;padding:2px 9px;border-radius:10px;font-size:11px;font-weight:bold;color:#fff;background:var(--ink)}
.pill.owner{background:#8e44ad}.pill.admin{background:#2980b9}.pill.member{background:#7f8c8d}
.pill.trial,.pill.cancelled{background:var(--accent)}.pill.suspended,.pill.expired,.pill.deleted{background:var(--danger)}
table{width:100%;border-collapse:collapse;margin-top:8px;background:#fff}
th{background:var(--ink);color:#fff;text-align:left;padding:8px 10px;font-size:12px}
td{padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
button{background:var(--ink);color:#fff;border:0;border-radius:4px;padding:7px 14px;font-size:13px;cursor:pointer}
button:hover{filter:brightness(1.1)} button.sm{padding:3px 9px;font-size:12px}
button.danger{background:var(--danger)} button.ghost{background:#7f8c8d}
button:disabled{opacity:.5;cursor:not-allowed}
input,select,textarea{padding:6px 9px;border:1px solid #ccc;border-radius:4px;font-size:13px;margin:3px 4px 3px 0;font-family:inherit}
label{font-size:12px;font-weight:bold;display:block;margin-top:8px;color:#555}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px 18px;margin:10px 0}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.muted{color:#888;font-size:13px}
.badge{padding:1px 7px;border-radius:3px;font-size:11px;font-weight:bold;color:#fff}
.badge.URGENT{background:var(--danger)} .badge.ACTION{background:var(--accent)}
.kv{display:flex;gap:24px;flex-wrap:wrap;margin:6px 0}
.kv div{font-size:13px}.kv b{display:block;color:#555;font-size:11px;text-transform:uppercase}
.warn{background:#fff3cd;border:1px solid #ffc107;border-radius:6px;padding:12px 16px;margin:10px 0;font-size:13px;color:#856404}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:6px;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:50}
#toast.show{opacity:.96}
.footer{margin-top:30px;color:#aaa;font-size:12px}.footer a{color:#888}