.control-hub-hero { min-height: 20rem; }
.control-hero-actions { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1.3rem; }
.control-jump-nav { position: sticky; z-index: 18; top: 5rem; display: flex; justify-content: center; gap: .3rem; width: fit-content; margin: -1.1rem auto 2.3rem; padding: .35rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(255,253,248,.94); box-shadow: 0 10px 30px rgba(8,31,25,.1); backdrop-filter: blur(14px); }
.control-jump-nav a { padding: .5rem .75rem; border-radius: .55rem; color: var(--ink-soft); font-size: .66rem; font-weight: 800; text-decoration: none; }
.control-jump-nav a:hover, .control-jump-nav a:focus-visible { background: var(--fir); color: white; }
.control-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; margin-bottom: 1rem; }
.control-stat-grid article { position: relative; overflow: hidden; min-height: 8.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: rgba(255,253,248,.82); }
.control-stat-grid article::after { content: ""; position: absolute; width: 5rem; height: 5rem; right: -2.7rem; top: -2.7rem; border: 1px solid rgba(201,104,53,.16); border-radius: 50%; }
.control-stat-grid article.needs-attention { border-color: rgba(201,104,53,.45); background: linear-gradient(135deg, rgba(201,104,53,.1), rgba(255,253,248,.82)); }
.control-stat-grid span, .control-stat-grid strong, .control-stat-grid small { display: block; }
.control-stat-grid span { color: var(--ink-soft); font-size: .62rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.control-stat-grid strong { margin: .45rem 0 .25rem; font-size: 2.2rem; line-height: 1; }
.control-stat-grid small { color: var(--ink-soft); font-size: .62rem; }
.control-overview-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(20rem,.9fr); gap: 1rem; align-items: start; }
.control-queue, .control-recent { min-height: 24rem; }
.control-queue-list, .control-match-list { display: grid; margin-top: .8rem; }
.control-queue-list article { display: grid; grid-template-columns: 2.5rem minmax(0,1fr) auto; align-items: center; gap: .75rem; padding: .72rem 0; border-bottom: 1px solid var(--line); }
.control-queue-list article:last-child, .control-match-list a:last-child { border-bottom: 0; }
.control-queue-mark { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .65rem; background: rgba(201,104,53,.1); color: var(--copper); font-size: .65rem; font-weight: 850; }
.control-queue-list article > div { display: flex; min-width: 0; flex-direction: column; gap: .15rem; }
.control-queue-list small, .control-queue-list article > a { color: var(--ink-soft); font-size: .62rem; }
.control-queue-list small a { font-weight: 750; text-decoration: none; }
.control-queue-list article > a { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: .5rem; font-weight: 750; text-decoration: none; }
.control-queue-list article > a:hover { border-color: var(--copper); color: var(--copper); }
.control-match-list a { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .72rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.control-match-list a > div { display: flex; min-width: 0; flex-direction: column; gap: .12rem; }
.control-match-list strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.control-match-list small, .control-match-list time { color: var(--ink-soft); font-size: .58rem; }
.control-mini-empty { display: flex; align-items: center; justify-content: center; gap: .8rem; min-height: 17rem; text-align: left; }
.control-mini-empty > span { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--line); border-radius: 50%; color: var(--copper); font-weight: 850; }
.control-mini-empty > div { display: flex; flex-direction: column; gap: .15rem; }
.control-mini-empty small { color: var(--ink-soft); font-size: .65rem; }
.control-section { margin-top: 3rem; scroll-margin-top: 8rem; }
.control-member-list { display: grid; gap: .55rem; }
.control-member-list > article { display: grid; grid-template-columns: minmax(13rem,1fr) minmax(15rem,.85fr) auto minmax(14rem,.75fr); align-items: center; gap: 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .85rem; background: rgba(255,253,248,.8); }
.control-member-list > article.is-inactive { opacity: .68; background: rgba(166,63,53,.04); }
.control-member-person { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.control-member-avatar { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; }
.control-member-person > div { display: flex; min-width: 0; flex-direction: column; gap: .1rem; }
.control-member-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-member-person strong a { text-decoration: none; }
.control-member-person small { color: var(--ink-soft); font-size: .6rem; }
.control-member-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
.control-member-metrics span { padding-right: .5rem; border-right: 1px solid var(--line); }
.control-member-metrics span:last-child { border-right: 0; }
.control-member-metrics b, .control-member-metrics small { display: block; }
.control-member-metrics b { font-size: .73rem; }
.control-member-metrics small { color: var(--ink-soft); font-size: .52rem; }
.member-access-state { justify-self: start; padding: .3rem .5rem; border-radius: 99px; background: #f2dfda; color: #914632; font-size: .58rem; font-weight: 800; }
.member-access-state.is-active { background: #ddecdf; color: #1d674c; }
.control-member-actions { display: flex; justify-content: flex-end; align-items: center; gap: .35rem; flex-wrap: wrap; }
.control-member-actions a, .control-member-actions button, .control-member-actions > span { min-height: 1.95rem; padding: .38rem .5rem; border: 1px solid var(--line); border-radius: .48rem; background: transparent; color: var(--ink-soft); font-size: .56rem; font-weight: 750; text-decoration: none; }
.control-member-actions button { border-color: rgba(166,63,53,.3); color: var(--danger); cursor: pointer; }
.control-member-actions a:hover { border-color: var(--copper); color: var(--copper); }
.control-member-actions form { margin: 0; }
.control-season-layout { margin-top: 0; }
.control-backup-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1rem; min-height: 8rem; padding: 1.2rem; border: 1px solid rgba(45,130,96,.34); border-radius: .95rem; background: linear-gradient(135deg, rgba(45,130,96,.1), rgba(255,253,248,.86)); }
.control-backup-card.needs-attention { border-color: rgba(201,104,53,.5); background: linear-gradient(135deg, rgba(201,104,53,.11), rgba(255,253,248,.86)); }
.control-backup-signal { width: .8rem; height: .8rem; border-radius: 50%; background: #2d8260; box-shadow: 0 0 0 .35rem rgba(45,130,96,.12); }
.control-backup-card.needs-attention .control-backup-signal { background: var(--copper); box-shadow: 0 0 0 .35rem rgba(201,104,53,.12); }
.control-backup-card > div { display: flex; min-width: 0; flex-direction: column; gap: .18rem; }
.control-backup-card small, .control-backup-card p { color: var(--ink-soft); font-size: .62rem; }
.control-backup-card strong { font-size: 1rem; }
.control-backup-card p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-backup-state { padding: .38rem .62rem; border-radius: 99px; background: #ddecdf; color: #1d674c; font-size: .6rem; font-weight: 850; }
.control-backup-card.needs-attention .control-backup-state { background: #f2dfda; color: #914632; }
.control-backup-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(18rem,.75fr); gap: 1rem; align-items: stretch; }
.control-backup-form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: 1.2rem; }
.control-backup-form > div:first-child { grid-column: 1 / -1; }
.control-backup-form h3, .control-backup-form p { margin: 0; }
.control-backup-form > div:first-child > p:last-child { margin-top: .35rem; color: var(--ink-soft); font-size: .72rem; line-height: 1.55; }
.control-backup-form .button { grid-column: 1 / -1; justify-self: start; }
.control-rule-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }
.control-rule-grid > a { display: flex; min-height: 12rem; flex-direction: column; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: rgba(255,253,248,.8); text-decoration: none; transition: transform .16s ease, border-color .16s ease; }
.control-rule-grid > a:hover { transform: translateY(-3px); border-color: rgba(201,104,53,.5); }
.control-rule-grid span { color: var(--copper); font-size: .62rem; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.control-rule-grid strong { overflow: hidden; margin-top: .65rem; font-size: 2rem; text-overflow: ellipsis; white-space: nowrap; }
.control-rule-grid small { margin-top: .2rem; color: var(--ink-soft); font-size: .62rem; }
.control-rule-grid b { margin-top: auto; color: var(--copper); font-size: .64rem; }
@media (max-width: 1180px) { .control-member-list > article { grid-template-columns: minmax(13rem,1fr) minmax(15rem,1fr) auto; } .control-member-actions { grid-column: 1/-1; justify-content: flex-start; padding-left: 3.2rem; } .control-rule-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .control-stat-grid { grid-template-columns: 1fr 1fr; } .control-overview-grid { grid-template-columns: 1fr; } .control-queue, .control-recent { min-height: 0; } .control-member-list > article { grid-template-columns: minmax(0,1fr) auto; } .control-member-metrics { grid-column: 1/-1; grid-row: 2; padding-left: 3.2rem; } .control-member-actions { grid-row: 3; padding-left: 3.2rem; } }
@media (max-width: 760px) { .control-jump-nav { position: static; width: 100%; margin: 1rem 0 1.5rem; overflow-x: auto; justify-content: flex-start; } .control-jump-nav a { white-space: nowrap; } .control-stat-grid { gap: .6rem; } .control-stat-grid article { min-height: 7.5rem; } .control-queue-list article { grid-template-columns: 2.5rem minmax(0,1fr); } .control-queue-list article > a { grid-column: 2; justify-self: start; } .control-hero-actions, .control-hero-actions .button { width: 100%; } .control-rule-grid { grid-template-columns: 1fr; } }
@media (max-width: 850px) { .control-backup-layout { grid-template-columns: 1fr; } }
@media (max-width: 440px) { .control-stat-grid { grid-template-columns: 1fr; } .control-member-list > article { grid-template-columns: 1fr; } .member-access-state { grid-row: auto; } .control-member-metrics, .control-member-actions { grid-column: auto; grid-row: auto; padding-left: 0; } .control-member-actions { justify-content: flex-start; } .control-backup-card { grid-template-columns: auto minmax(0,1fr); } .control-backup-state { grid-column: 2; justify-self: start; } .control-backup-form { grid-template-columns: 1fr; } .control-backup-form > div:first-child, .control-backup-form .button { grid-column: auto; } }
@media (prefers-color-scheme: dark) { .control-jump-nav, .control-stat-grid article, .control-member-list > article, .control-rule-grid > a { background: rgba(18,42,36,.94); } .control-stat-grid article.needs-attention, .control-backup-card.needs-attention { background: linear-gradient(135deg, rgba(201,104,53,.14), rgba(18,42,36,.94)); } .control-backup-card { background: linear-gradient(135deg, rgba(45,130,96,.12), rgba(18,42,36,.94)); } .member-access-state { background: #533227; color: #f0b6a7; } .member-access-state.is-active { background: #24473e; color: #baddd0; } }