:root {
  --bg: #0d1117;
  --surface: #151b23;
  --surface-2: #1b2330;
  --line: #2a3441;
  --text: #edf2f7;
  --muted: #9dacbb;
  --accent: #ff6a3d;
  --accent-2: #ff9f43;
  --green: #43d17b;
  --red: #ff5f64;
  --radius: 16px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% -20%, #42231d 0, transparent 36rem), var(--bg); }
a { color: inherit; }
.topbar { min-height: 72px; padding: 0 3vw; display: flex; align-items: center; gap: 2.5rem; border-bottom: 1px solid var(--line); background: rgba(13,17,23,.88); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand span:last-child { display: grid; line-height: 1.05; }
.brand small { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg,var(--accent),var(--accent-2)); color: #19100b; font-weight: 900; box-shadow: 0 8px 24px #ff6a3d33; }
.brand-mark.large { width: 64px; height: 64px; border-radius: 19px; font-size: 1.65rem; margin: auto; }
nav { display: flex; gap: .4rem; }
nav a { color: var(--muted); text-decoration: none; padding: .65rem .8rem; border-radius: 10px; }
nav a:hover { color: var(--text); background: var(--surface-2); }
.identity { margin-left: auto; display: flex; align-items: center; gap: 1rem; color: var(--muted); }
.link-button { border: 0; padding: 0; color: var(--accent-2); background: none; cursor: pointer; font: inherit; }
.shell { width: min(1200px, 94vw); margin: 0 auto; padding: 3.25rem 0 6rem; }
.hero { padding: 3rem 0 2.5rem; max-width: 720px; }
h1 { margin: .15rem 0 .65rem; font-size: clamp(2rem,5vw,3.6rem); line-height: 1.04; letter-spacing: -.04em; }
h2 { margin-top: 0; font-size: 1.2rem; }
p { color: var(--muted); line-height: 1.6; }
.eyebrow { color: var(--accent-2); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.muted { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 1rem; }
.stat { min-height: 150px; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg,var(--surface-2),var(--surface)); text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; transition: transform .15s,border-color .15s; }
.stat:hover { transform: translateY(-2px); border-color: #ff8b6566; }
.stat strong { font-size: 2.5rem; }.stat span { color: var(--muted); }
.panel { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21,27,35,.94); box-shadow: 0 18px 50px #0003; }
.panel.compact { margin-bottom: 1rem; }.panel.narrow { max-width: 680px; }.table-panel { padding: 0; overflow: hidden; }
.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }
.feature-grid div { background: var(--surface-2); padding: 1rem; border-radius: 12px; display: grid; gap: .25rem; }
.feature-grid span { color: var(--muted); font-size: .9rem; }
.page-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 1.5rem; }
.page-heading h1 { font-size: clamp(2rem,4vw,3rem); }.page-heading p { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; } th,td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; } tbody tr:hover { background: #ffffff03; }
td a { color: var(--accent-2); text-decoration: none; }.badge { display: inline-grid; place-items: center; min-width: 2rem; padding: .22rem .5rem; border-radius: 999px; background: var(--surface-2); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface-2); text-decoration: none; cursor: pointer; font: inherit; font-weight: 700; }
.button:hover { border-color: #fff4; }.button.primary { color: #1b100b; border-color: transparent; background: linear-gradient(135deg,var(--accent),var(--accent-2)); }.button.danger { color: white; border-color: transparent; background: var(--red); }.button.small { min-height: 34px; padding: .4rem .7rem; font-size: .85rem; }
.form-grid { display: grid; gap: 1rem; }.inline-form { display: grid; grid-template-columns: 1fr 2fr auto; gap: 1rem; align-items: end; }
label { display: grid; gap: .45rem; color: var(--muted); font-size: .86rem; font-weight: 650; }
input,select { width: 100%; min-height: 44px; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; outline: none; background: #0f141b; color: var(--text); font: inherit; } input:focus,select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #ff6a3d22; } input:disabled { opacity: .6; }
.actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: .5rem; }.actions.wrap { flex-wrap: wrap; justify-content: flex-start; }
.columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; align-items: start; }.danger-zone { margin-top: 1rem; border-color: #ff5f6444; display: grid; gap: 1.25rem; }
.tag-list { display: flex; gap: .4rem; flex-wrap: wrap; list-style: none; padding: 0; }.tag-list li { padding: .35rem .65rem; border-radius: 999px; background: var(--surface-2); color: var(--accent-2); font-size: .85rem; }
.member-list { list-style: none; padding: 0; }.member-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }.danger-text { color: var(--red); }
.notice { padding: 1rem 1.2rem; margin-bottom: 1rem; border: 1px solid; border-radius: 12px; }.notice.warning { border-color: #ffb84d55; background: #4a300d55; }.notice.success { border-color: #43d17b55; background: #10382277; }
.break-all { word-break: break-all; user-select: all; }.login-page { display: grid; place-items: center; padding: 2rem; }.login-card { width: min(480px,100%); padding: 2.5rem; border: 1px solid var(--line); border-radius: 24px; text-align: center; background: var(--surface); box-shadow: 0 30px 90px #0008; }.login-card .button { margin-top: 1rem; width: 100%; }
.application-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }.application-card { min-height: 155px; padding: 1.25rem; display: grid; grid-template-columns: 70px 1fr auto; gap: 1rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg,var(--surface-2),var(--surface)); text-decoration: none; transition: transform .15s,border-color .15s; }.application-card:hover { transform: translateY(-2px); border-color: #ff8b6566; }.application-card img,.application-title img { width: 64px; height: 64px; object-fit: contain; border-radius: 15px; background: #fff; padding: 6px; }.application-card h2 { margin-bottom: .3rem; }.application-card p { margin: 0; }.application-title { display: flex; align-items: center; gap: 1rem; }.application-heading { align-items: center; }.application-title h1 { font-size: clamp(2rem,4vw,3rem); }
.filter-panel { margin-bottom: 1rem; }.filter-form { display: grid; grid-template-columns: minmax(240px,2fr) minmax(180px,1fr) minmax(190px,1fr) auto; gap: .8rem; align-items: end; }.filter-actions { display: flex; gap: .55rem; }.result-summary { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); }.result-summary strong { color: var(--text); }.form-hint { margin: 1rem 0 0; font-size: .86rem; }
.application-group-section { padding: 0; margin-top: 1rem; overflow: hidden; }.application-group-heading { display: grid; grid-template-columns: 58px 1fr auto; gap: 1rem; align-items: center; padding: 1.15rem 1.25rem; background: linear-gradient(135deg,#222b38,#171e27); border-bottom: 1px solid var(--line); }.application-group-heading img { width: 52px; height: 52px; object-fit: contain; border-radius: 13px; background: #fff; padding: 5px; }.application-group-heading h2,.category-heading h2 { margin: 0 0 .15rem; }.application-group-heading p,.category-heading p { margin: 0; }.application-group-heading .eyebrow,.category-heading .eyebrow { margin: 0 0 .2rem; }.role-list { display: grid; }.role-row { display: grid; grid-template-columns: minmax(220px,1.4fr) minmax(260px,1fr) 90px; gap: 1rem; align-items: center; min-height: 76px; padding: .9rem 1.25rem; text-decoration: none; border-bottom: 1px solid var(--line); transition: background .15s; }.role-row:last-child { border-bottom: 0; }.role-row:hover { background: #ffffff05; }.role-copy,.member-count { display: grid; gap: .2rem; }.role-copy small,.member-count small { color: var(--muted); }.role-row code { color: var(--accent-2); overflow-wrap: anywhere; }.member-count { text-align: right; }.member-count strong { font-size: 1.25rem; }
.group-category { margin-top: 1rem; }.category-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.25rem; border-bottom: 1px solid var(--line); }.empty-state { margin-top: 1rem; text-align: center; padding: 3rem 1.5rem; }.empty-state .button { margin-top: .5rem; }
@media (max-width: 980px) { .filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); }.filter-actions { align-self: end; }.role-row { grid-template-columns: minmax(180px,1fr) minmax(220px,1fr) 80px; } }
@media (max-width: 760px) { .topbar { align-items: flex-start; padding: 1rem; flex-wrap: wrap; gap: 1rem; }.topbar nav { order: 3; width: 100%; overflow-x: auto; }.identity span { display: none; }.shell { padding-top: 2rem; }.stats,.columns,.feature-grid,.application-grid,.filter-form { grid-template-columns: 1fr; }.application-card { grid-template-columns: 58px 1fr; }.application-card .badge { display: none; }.application-card img { width: 52px; height: 52px; }.inline-form { grid-template-columns: 1fr; }.table-panel { overflow-x: auto; } th,td { white-space: nowrap; }.application-group-heading { grid-template-columns: 48px 1fr; }.application-group-heading img { width: 44px; height: 44px; }.application-group-heading .button { grid-column: 1 / -1; }.role-row { grid-template-columns: 1fr auto; }.role-row code { grid-column: 1 / -1; grid-row: 2; }.member-count { grid-column: 2; grid-row: 1; }.filter-actions .button { flex: 1; } }