:root{
--bg:#090a0d;--surface:#101216;--surface2:#15171c;--text:#fff;
--muted:#9297a3;--border:rgba(255,255,255,.07);--primary:#ff7800;
--primary-hover:#ff8c1a;--primary-light:rgba(255,120,0,.12);
--success:#22a06b;--error:#e04444;--radius:10px;--small:6px;
--shadow:0 8px 25px rgba(0,0,0,.25)
}

*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;display:flex;flex-direction:column;background:var(--bg);
color:var(--text);font-family:"Lexend Deca",-apple-system,BlinkMacSystemFont,
"Segoe UI",sans-serif
}

header{
height:4rem;padding-inline:calc(25vw - 10rem);display:grid;
grid-template-columns:minmax(16rem,1fr) minmax(16rem,2fr) minmax(16rem,1fr);
column-gap:2rem;background:#0b0c10;color:#fff;
border-bottom:1px solid var(--border);z-index:10
}

header .logo{justify-self:end;align-self:center;display:flex;align-items:center;gap:.8rem}
header .logo:before{
content:"";width:8px;height:26px;border-radius:999px;background:var(--primary)
}
header .nav{display:flex;align-items:center;gap:.5rem}
header a{color:#fff}

main{
height:0;flex:1;display:grid;
grid-template-columns:minmax(16rem,1fr) minmax(16rem,2fr) minmax(16rem,1fr);
grid-template-rows:minmax(0,1fr);column-gap:2rem;
padding:1rem 0 1.25rem;background:var(--bg);color:#fff
}

main>div{overflow-y:auto}
main h1,main h2,main h3,main h4,main h5{color:#fff}
main p{color:var(--muted)}
main hr{border:0;border-top:1px solid var(--border)}

a{color:#ff8a18;font-weight:600;text-decoration:none}
a:hover{color:#ffa044;text-decoration:none}

button{
border:0;border-radius:var(--small);padding:.6rem 1rem;
background:var(--primary);color:#fff;font-family:inherit;font-weight:700;
cursor:pointer;transition:.15s ease
}
button:hover{background:var(--primary-hover);transform:translateY(-1px);
box-shadow:0 5px 15px rgba(255,120,0,.2)}
button:active{transform:none}

button.secondary,.secondary-button{
background:var(--surface2);color:#fff;border:1px solid var(--border);
box-shadow:none
}
button.secondary:hover,.secondary-button:hover{
background:rgba(255,120,0,.1);color:var(--primary);border-color:var(--primary)
}

input,textarea,select{
box-sizing:border-box;background:#0c0e12;color:#fff;border:1px solid var(--border);
border-radius:var(--small);padding:.65rem .75rem;font-family:inherit;outline:none
}
input:focus,textarea:focus,select:focus{
border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,120,0,.1)
}
input::placeholder,textarea::placeholder{color:#646974}
input[type=checkbox]{width:1.2rem;height:1.2rem;margin:0;accent-color:var(--primary)}

.card,.panel,.rules,.guidelines,.requirements,
.editor,.editor-container,.guidelines-editor,.rules-editor{
background:var(--surface);color:#fff;border:1px solid var(--border);
border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;margin-bottom:1rem
}

.editor,.editor-container,.guidelines-editor,.rules-editor{
padding:0;overflow:hidden
}

.editor-header,.editor-title,.guidelines-header,.rules-header{
display:flex;align-items:center;justify-content:space-between;
min-height:55px;padding:0 1rem;background:#111318;
border-bottom:1px solid var(--border)
}
.editor-header h1,.editor-header h2,.editor-title h1,.editor-title h2,
.guidelines-header h1,.guidelines-header h2,.rules-header h1,.rules-header h2{
margin:0;font-size:1rem;font-weight:700
}

.editor-header:before,.guidelines-header:before,.rules-header:before{
content:"✎";display:flex;align-items:center;justify-content:center;
width:32px;height:32px;margin-right:.7rem;border-radius:7px;
background:var(--primary-light);color:var(--primary)
}

.editor-body,.editor-content,.guidelines-content,.rules-content{
padding:1rem;background:var(--surface)
}

.toolbar,.editor-toolbar{
display:flex;align-items:center;gap:.35rem;padding:.55rem .65rem;
background:var(--surface2);border:1px solid var(--border);
border-radius:var(--small);margin-bottom:.8rem
}
.toolbar button,.editor-toolbar button{
min-width:32px;height:32px;padding:0;background:transparent;
color:var(--muted);box-shadow:none
}
.toolbar button:hover,.editor-toolbar button:hover{
background:var(--primary-light);color:var(--primary);transform:none;box-shadow:none
}

[contenteditable=true],.editor textarea,.guidelines textarea,.rules textarea{
width:100%;min-height:180px;padding:1rem;background:#0c0e12;color:#fff;
border:1px solid var(--border);border-radius:var(--small);outline:none;
resize:vertical;font-family:inherit;line-height:1.6
}
[contenteditable=true]:focus,.editor textarea:focus,
.guidelines textarea:focus,.rules textarea:focus{
border-color:var(--primary)
}

.editor-actions,.editor-footer,.guidelines-actions,.rules-actions{
display:flex;align-items:center;justify-content:flex-end;gap:.5rem;
padding:.8rem 1rem;background:#0d0f13;border-top:1px solid var(--border)
}

.guideline-item,.rule-item,.requirement-item{
display:flex;align-items:flex-start;gap:.8rem;padding:.8rem;margin-bottom:.6rem;
background:var(--surface2);border:1px solid var(--border);
border-radius:var(--small)
}
.guideline-item:hover,.rule-item:hover,.requirement-item:hover{
border-color:var(--primary)
}
.guideline-number,.rule-number,.requirement-number{
flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;
justify-content:center;border-radius:7px;background:var(--primary-light);
color:var(--primary);font-size:.8rem;font-weight:800
}

/* =========================================
   PAGE LIST
   ========================================= */

.page-list{color:#fff}
.page-list h1,.page-list h2,.page-list h3{color:#fff}
.page-list p{color:var(--muted)}

.page-list .list-container{
background:transparent;padding:.25rem 0
}

.page-list .list{
border-collapse:separate;border-spacing:0 2px;width:100%
}

.page-list .list .rank{
width:2.2rem;padding-right:.4rem
}

.page-list .list .rank p{
margin:0;color:#666b75!important;font-size:.62rem
}

.page-list .list .level button{
width:100%;min-height:25px;height:25px;
padding:.2rem .55rem!important;
display:flex;align-items:center;justify-content:space-between;
background:#111318!important;color:#fff!important;
border:1px solid rgba(255,255,255,.035)!important;
border-radius:4px!important;
box-shadow:none!important;transform:none!important;
font-size:.7rem
}

.page-list .list .level button:hover{
background:#191c22!important;color:#fff!important;
border-color:rgba(255,255,255,.08)!important;
box-shadow:none!important
}

.page-list .list .level.active button{
background:var(--primary)!important;
color:#fff!important;
border-color:var(--primary)!important;
box-shadow:0 3px 10px rgba(255,120,0,.18)!important
}

.page-list .list .level button .type-label-lg{
color:inherit!important;font-size:.68rem;font-weight:700
}

.page-list .list .level.active button .type-label-lg{color:#fff!important}

.page-list .level-container{
min-width:0
}

.page-list .level-container .level{
display:flex;flex-direction:column;gap:.65rem;
padding-right:.5rem;max-width:48rem;color:#fff
}

.page-list .level-container .level h1{
margin:0;font-size:1.55rem;line-height:1.2;color:#fff
}

.page-list .level-container .level h2,
.page-list .level-container .level h3{
margin:.1rem 0;color:#fff
}

.page-list .level-container .level hr{
width:100%;margin:.15rem 0;border:0;
border-top:1px solid rgba(255,255,255,.1)
}

.page-list .level-container .level p{
margin:.15rem 0;color:#a0a4ad;font-size:.78rem;line-height:1.5
}

.page-list .level-container .level .level-authors{
display:flex;flex-wrap:wrap;gap:.45rem
}

.page-list .level-container .level .video{
width:100%;aspect-ratio:16/9;overflow:hidden;
background:#050608;border:1px solid var(--border);border-radius:5px
}

.page-list .level-container .level iframe,
.page-list .level-container .level video{
width:100%;height:100%;border:0
}

.page-list .level-container .level .stats{
display:flex;flex-wrap:wrap;gap:.2rem;margin:0;padding:0;
list-style:none
}

.page-list .level-container .level .stats li{
display:flex;flex-direction:column;gap:.1rem;
padding:.35rem .5rem;background:#111318;
border:1px solid var(--border);border-radius:5px
}

.page-list .level-container .level .stats li p{
margin:0;font-size:.65rem;color:#777c86
}

.page-list .level-container .level .stats li strong{
font-size:.75rem;color:#fff
}

.page-list .level-container .level .records{
width:100%;font-size:.7rem;color:#fff
}

.page-list .level-container .level .records table{
width:100%;border-collapse:collapse
}

.page-list .level-container .level .records tr{
border-bottom:1px solid rgba(255,255,255,.045)
}

.page-list .level-container .level .records td{
padding:.45rem .2rem;color:#d8dae0
}

.page-list .level-container .level .records td:not(:last-child){
padding-right:.7rem
}

.page-list .level-container .level .records .percent{
color:var(--primary);font-weight:700
}

.page-list .level-container .level .records .user{
color:#fff;font-weight:600
}

.page-list .level-container .level .records .hz{
color:#777c86
}

/* RIGHT SIDE / META */

.page-list .meta,
.page-list .editors,
.page-list .requirements,
.page-list .records-container{
color:#fff
}

.page-list .meta .card,
.page-list .meta .panel,
.page-list .meta .requirements,
.page-list .meta .editors-box{
background:#101216!important;color:#fff!important;
border:1px solid var(--border)!important;
box-shadow:none!important
}

.page-list .meta h2,
.page-list .meta h3,
.page-list .meta h4{
color:#fff!important
}

.page-list .meta p,
.page-list .meta span{
color:#969aa4
}

.page-list .meta a{color:var(--primary)}

.page-list .type-label-lg{
color:inherit;font-size:.7rem
}

.page-list .difficulty,
.page-list .difficulty-label{
color:var(--primary)
}

/* SUBMIT / ACTION BUTTONS */

.page-list .submit,
.page-list .submit button,
.page-list .action button,
.page-list .edit button{
background:var(--primary)!important;color:#fff!important;
border:0!important
}

.page-list .submit button:hover,
.page-list .action button:hover,
.page-list .edit button:hover{
background:var(--primary-hover)!important
}

/* SCROLLBARS */

::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#292d35;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#3a3f49}

/* SPINNER */

.spinner{
display:flex;align-items:center;justify-content:center;
grid-column:span 3;color:var(--primary)
}

/* MOBILE */

@media screen and (max-width:900px){
header,main{grid-template-columns:1fr}
header{height:4rem;padding:0 1rem}
header .logo{justify-self:start}
main{height:auto;padding:1rem}
main>div{overflow:visible}
.page-list .level-container .level{max-width:none;padding-right:0}
.page-list .list .level button{height:27px}
.spinner{grid-column:span 1}
}

@media screen and (max-width:600px){
.page-list .level-container .level h1{font-size:1.25rem}
.page-list .level-container .level .stats{gap:.15rem}
.page-list .level-container .level .stats li{padding:.3rem}
}