:root{
--ss-bg:#24262F;--ss-panel:#2B2E3A;--ss-panel-2:#333747;--ss-row-hover:#3A3E50;
--ss-border:#3E4356;--ss-gold:#E4B62A;--ss-gold-bright:#F5CE4B;--ss-text:#EDEEF2;
--ss-text-dim:#A6AAB8;--ss-red:#E23A2E;--ss-green:#5FBF54;--ss-tab:#5E9A3E;--ss-tab-hover:#6BAD48;
--ss-btn:#454B60;--ss-btn-hover:#545B75;--cut:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--ss-bg);color:var(--ss-text);font-family:"Noto Sans",system-ui,sans-serif;font-size:15px;line-height:1.5;display:flex;flex-direction:column;min-height:100vh;padding-bottom:52px}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 20px;flex:1;display:flex;flex-direction:column}
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 18px;border-bottom:2px solid var(--ss-gold)}
.brand{display:flex;align-items:baseline;gap:10px;font-weight:800;letter-spacing:.06em;text-decoration:none}
.brand .d{font-size:30px;color:var(--ss-text)}
.brand .p{font-size:30px;color:var(--ss-gold)}
.brand .tag{font-size:12px;color:var(--ss-text-dim);letter-spacing:.18em;text-transform:uppercase;transform:translateY(-2px)}
.top-actions{display:flex;gap:10px}

.btn{appearance:none;border:0;cursor:pointer;color:var(--ss-text);font-family:inherit;font-weight:700;font-size:14px;letter-spacing:.02em;padding:11px 20px;background:var(--ss-btn);transition:background .12s;text-decoration:none;display:inline-flex;align-items:center;gap:8px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.btn:hover{background:var(--ss-btn-hover)}
.btn:active{filter:brightness(.94)}
.btn.gold{background:var(--ss-gold);color:#141014}
.btn.gold:hover{background:var(--ss-gold-bright)}
.btn.small{padding:9px 14px;font-size:13px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn-row .btn{clip-path:polygon(0 0,100% 0,100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.btn-row .btn:last-child{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}

section.title{color:var(--ss-gold);font-weight:800;font-size:22px;letter-spacing:.04em;text-transform:uppercase;padding:22px 2px 12px}
.panel{background:var(--ss-panel)}
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:14px;padding:14px 16px}
.row:hover{background:var(--ss-row-hover)}
.row .name{flex:1;font-weight:600}
.row .name small{display:block;color:var(--ss-text-dim);font-weight:400;font-size:12.5px;margin-top:2px}
.row .meta{color:var(--ss-text-dim);font-variant-numeric:tabular-nums;min-width:96px;text-align:right}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ss-red);margin-right:6px;vertical-align:middle}
.dot.on{background:var(--ss-green)}

nav.bottom{position:fixed;left:0;right:0;bottom:0;z-index:20;border-top:2px solid var(--ss-gold);background-color:#22252F;background-image:repeating-linear-gradient(135deg,#2A2E3A 0 22px,#20232C 22px 44px)}
nav.bottom .inner{max-width:1040px;margin:0 auto;padding:0 20px;display:flex;align-items:stretch;min-height:46px}
nav.bottom a{display:flex;align-items:center;color:var(--ss-text);text-decoration:none;font-weight:700;font-size:14px;padding:0 16px}
nav.bottom a:hover{background:rgba(255,255,255,.05)}
nav.bottom a.active{background:var(--ss-tab);color:#fff}
nav.bottom a.active:hover{background:var(--ss-tab-hover)}
nav.bottom .ver{margin-left:auto;display:flex;align-items:center;color:var(--ss-text-dim);font-size:12px}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ss-panel-2);color:var(--ss-text);padding:10px 16px;opacity:0;transition:.2s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:560px){
.brand .d,.brand .p{font-size:24px}
.brand .tag{display:none}
header.top{flex-wrap:wrap;gap:10px 12px;padding:18px 0 14px}
.top-actions{flex-wrap:nowrap}
.btn{padding:11px 16px}
.btn-row{flex-direction:column;align-items:stretch}
.top-actions.btn-row{flex-direction:row;align-items:center}
.btn-row:not(.top-actions) .btn{width:100%;justify-content:center;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.row{flex-wrap:wrap}
.row .meta{min-width:auto;margin-left:auto}
}