:root{
--blue:#1689e8;
--green:#22b978;
--orange:#e5a12d;
--red:#ef5363;
--gold:#d89a20;
--side:#0b1f2d;
--side2:#102b3b;
--border:rgba(128,128,128,.21);
--soft:rgba(128,128,128,.065)
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:15px Arial,sans-serif}
button,input,select,textarea{font:15px Arial,sans-serif}
button{cursor:pointer}
[hidden]{display:none!important}


/* APP */
#cfAdmin{min-height:100vh}


/* SIDEBAR */
.cfa-sidebar{
position:fixed;
z-index:70;
left:0;
top:0;
bottom:0;
width:245px;
display:flex;
flex-direction:column;
background:var(--side);
color:#dce9f1
}

.cfa-side-head{
display:flex;
align-items:center;
gap:9px;
height:66px;
padding:0 14px;
border-bottom:1px solid rgba(255,255,255,.07)
}

.cfa-brandmark{
display:flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
flex:0 0 36px;
border-radius:7px;
background:var(--blue);
color:#fff
}

.cfa-brandtext{min-width:0}

.cfa-side-head strong,
.cfa-side-head span{
display:block
}

.cfa-side-head strong{
font-size:.9em
}

.cfa-side-head span{
font-size:.64em;
opacity:.5
}

#cfaSideClose{
display:none;
margin-left:auto;
width:32px;
height:32px;
border:0;
border-radius:5px;
background:rgba(255,255,255,.06);
color:#fff
}


/* NAV */
.cfa-nav{
flex:1;
overflow:auto;
padding:10px 8px
}

.cfa-nav button{
position:relative;
display:flex;
align-items:center;
gap:10px;
width:100%;
margin:2px 0;
padding:10px;
border:0;
border-radius:6px;
background:transparent;
color:#9db1be;
text-align:left;
font-size:.76em
}

.cfa-nav button i{
width:18px;
text-align:center
}

.cfa-nav button span{
flex:1
}

.cfa-nav button:hover{
background:rgba(255,255,255,.05);
color:#fff
}

.cfa-nav button.active{
background:rgba(22,137,232,.14);
color:#67bbff
}

.cfa-nav button.active:before{
content:"";
position:absolute;
left:0;
top:7px;
bottom:7px;
width:3px;
border-radius:4px;
background:var(--blue)
}


/* NAV INFO SECTION */
.cfa-nav-section{
display:flex;
align-items:center;
gap:9px;
margin:13px 4px 7px;
padding:9px 8px;
border:1px solid rgba(255,255,255,.055);
border-radius:7px;
background:rgba(255,255,255,.035)
}

.cfa-nav-section-icon{
display:flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
flex:0 0 30px;
border-radius:6px;
background:rgba(22,137,232,.12);
color:#67bbff;
font-size:.72em
}

.cfa-nav-section>div:last-child{
min-width:0
}

.cfa-nav-section strong,
.cfa-nav-section span{
display:block
}

.cfa-nav-section strong{
color:#dce9f1;
font-size:.65em;
line-height:1.25
}

.cfa-nav-section span{
margin-top:2px;
color:#718b9b;
font-size:.52em;
line-height:1.35
}

.cfa-nav-section.system .cfa-nav-section-icon{
background:rgba(34,185,120,.1);
color:#4ed79a
}


/* MAIN */
.cfa-main{
min-height:100vh;
margin-left:245px
}


/* TOPBAR */
.cfa-topbar{
position:sticky;
z-index:50;
top:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
height:66px;
padding:0 18px;
border-bottom:1px solid var(--border);
background:rgba(255,255,255,.94);
backdrop-filter:blur(9px)
}

.cfa-top-left{
display:flex;
align-items:center;
gap:10px
}

.cfa-top-left h1{
margin:0;
font-size:1.08em
}

.cfa-top-left p{
margin:2px 0 0;
font-size:.68em;
opacity:.56
}

.cfa-menu{
display:none;
width:37px;
height:37px;
border:1px solid var(--border);
border-radius:6px;
background:transparent
}

.cfa-top-actions{
display:flex;
gap:6px
}

.cfa-top-actions>button{
height:37px;
border:1px solid var(--border);
border-radius:6px;
background:transparent
}

#cfaTheme{
width:37px
}

.cfa-add{
display:flex;
align-items:center;
gap:6px;
padding:0 11px!important;
border:0!important;
background:var(--blue)!important;
color:#fff!important;
font-size:.72em!important;
font-weight:700
}


/* CONTENT */
.cfa-content{
padding:16px
}

.cfa-page{
display:none
}

.cfa-page.active{
display:block
}


/* SUMMARY */
.cfa-summary{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin-bottom:10px
}

.cfa-summary article{
display:flex;
align-items:center;
gap:10px;
padding:12px;
border:1px solid var(--border);
border-radius:8px;
background:var(--soft)
}

.cfa-summary article>i{
display:flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
flex:0 0 38px;
border-radius:7px;
background:rgba(22,137,232,.1);
color:var(--blue)
}

.cfa-summary span,
.cfa-summary strong{
display:block
}

.cfa-summary span{
font-size:.63em;
opacity:.58
}

.cfa-summary strong{
font-size:1.22em
}


/* PANEL */
.cfa-panel{
border:1px solid var(--border);
border-radius:8px;
overflow:hidden
}


/* FILTER */
.cfa-tools{
display:grid;
grid-template-columns:minmax(230px,1fr) repeat(3,155px);
gap:7px;
padding:11px;
border-bottom:1px solid var(--border)
}

.cfa-search{
position:relative
}

.cfa-search i{
position:absolute;
left:11px;
top:12px;
opacity:.45
}

.cfa-search input,
.cfa-tools select{
width:100%;
height:39px;
border:1px solid var(--border);
border-radius:6px;
background:transparent;
outline:0
}

.cfa-search input{
padding:0 10px 0 35px
}

.cfa-tools select{
padding:0 8px
}


/* TABLE */
.cfa-table-wrap{
overflow-x:auto;
-webkit-overflow-scrolling:touch
}

table{
width:100%;
border-collapse:collapse;
white-space:nowrap
}

th,
td{
padding:10px 11px;
border-bottom:1px solid var(--border);
text-align:left;
font-size:.72em
}

th{
font-size:.6em;
text-transform:uppercase;
opacity:.5
}

tbody tr:hover{
background:var(--soft)
}

.cfa-member{
display:flex;
align-items:center;
gap:8px
}

.cfa-avatar{
display:flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
flex:0 0 32px;
border-radius:6px;
background:rgba(22,137,232,.1);
color:var(--blue);
font-size:.68em;
font-weight:800
}

.cfa-member b,
.cfa-member small{
display:block
}

.cfa-member small{
font-size:.78em;
opacity:.53
}

.cfa-package,
.cfa-status,
.cfa-login-time{
display:inline-flex;
align-items:center;
gap:5px
}

.cfa-package{
font-weight:700
}

.cfa-package i{
color:var(--blue)
}

.cfa-package.premium i{
color:var(--gold)
}

.cfa-status{
font-weight:700
}

.cfa-status.verified{
color:var(--green)
}

.cfa-status.pending{
color:var(--orange)
}

.cfa-status.unpaid,
.cfa-status.expired{
color:var(--red)
}

.cfa-login-time i{
opacity:.45
}

.cfa-actions{
display:flex;
gap:4px
}

.cfa-actions button{
width:31px;
height:31px;
border:1px solid var(--border);
border-radius:5px;
background:transparent
}


/* TABLE FOOT */
.cfa-table-footer{
display:flex;
align-items:center;
justify-content:space-between;
padding:9px 11px;
font-size:.68em
}

.cfa-pagination{
display:flex;
align-items:center;
gap:7px
}

.cfa-pagination button{
width:30px;
height:30px;
border:1px solid var(--border);
border-radius:5px;
background:transparent
}

.cfa-pagination button:disabled{
opacity:.3;
cursor:not-allowed
}


/* EDITOR HEADER */
.cfa-editor-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px
}

.cfa-editor-head h2{
margin:0;
font-size:1em
}

.cfa-editor-head h2 i{
margin-right:6px;
color:var(--blue)
}

.cfa-editor-head p{
margin:3px 0 0;
font-size:.68em;
opacity:.55
}


/* EDIT CREATE SWITCH */
.cfa-mode-switch{
display:flex;
gap:4px;
padding:4px;
border-radius:7px;
background:var(--soft)
}

.cfa-mode-switch button{
display:flex;
align-items:center;
gap:5px;
padding:8px 11px;
border:0;
border-radius:5px;
background:transparent;
font-size:.7em;
font-weight:700
}

.cfa-mode-switch button.active{
background:var(--blue);
color:#fff
}


/* EDITOR */
.cfa-editor-layout{
display:grid;
grid-template-columns:285px minmax(0,1fr);
gap:10px
}

.cfa-editor-search,
.cfa-editor-form{
min-width:0;
border:1px solid var(--border);
border-radius:8px;
overflow:hidden
}


/* SECTION TITLE */
.cfa-section-title{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:11px 12px;
border-bottom:1px solid var(--border)
}

.cfa-section-title strong,
.cfa-section-title span{
display:block
}

.cfa-section-title strong{
font-size:.76em
}

.cfa-section-title strong i{
margin-right:5px;
color:var(--blue)
}

.cfa-section-title>div>span{
margin-top:2px;
font-size:.6em;
opacity:.54
}

.cfa-editor-id{
padding:4px 7px;
border-radius:5px;
background:rgba(22,137,232,.09);
color:var(--blue);
font-size:.6em!important;
font-weight:800
}


/* EDITOR SEARCH */
.cfa-editor-searchbox{
position:relative;
margin:10px
}

.cfa-editor-searchbox>i{
position:absolute;
left:11px;
top:12px;
opacity:.45
}

.cfa-editor-searchbox input{
width:100%;
height:39px;
padding:0 39px 0 34px;
border:1px solid var(--border);
border-radius:6px;
background:transparent;
outline:0
}

.cfa-editor-searchbox button{
position:absolute;
right:4px;
top:4px;
width:31px;
height:31px;
border:0;
border-radius:5px;
background:var(--soft)
}

.cfa-editor-search-results{
max-height:470px;
overflow:auto;
padding:0 9px 9px
}

.cfa-editor-member{
display:flex;
align-items:center;
gap:8px;
width:100%;
margin-top:6px;
padding:9px;
border:1px solid var(--border);
border-radius:6px;
background:transparent;
text-align:left
}

.cfa-editor-member:hover,
.cfa-editor-member.active{
border-color:rgba(22,137,232,.45);
background:rgba(22,137,232,.065)
}

.cfa-editor-member .avatar{
display:flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
flex:0 0 32px;
border-radius:6px;
background:rgba(22,137,232,.1);
color:var(--blue);
font-size:.68em;
font-weight:800
}

.cfa-editor-member>div{
min-width:0;
flex:1
}

.cfa-editor-member b,
.cfa-editor-member small{
display:block
}

.cfa-editor-member b{
font-size:.7em
}

.cfa-editor-member small{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:.59em;
opacity:.52
}

.cfa-editor-member>i{
font-size:.68em;
opacity:.35
}


/* EMPTY */
.cfa-editor-empty,
.cfa-empty{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
min-height:250px;
padding:25px;
text-align:center
}

.cfa-editor-empty i,
.cfa-empty i{
margin-bottom:8px;
color:var(--blue);
font-size:25px
}

.cfa-editor-empty b{
font-size:.72em
}

.cfa-editor-empty span{
font-size:.6em;
opacity:.55
}

.cfa-empty h2{
margin:0;
font-size:1em
}

.cfa-empty p{
max-width:430px;
font-size:.7em;
opacity:.55
}


/* FORM */
#memberEditorForm{
padding:12px
}

.cfa-form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px
}

.cfa-field label{
display:block;
margin-bottom:5px;
font-size:.63em;
font-weight:700;
opacity:.7
}

.cfa-field-icon{
position:relative
}

.cfa-field-icon>i{
position:absolute;
left:11px;
top:12px;
width:15px;
text-align:center;
opacity:.42
}

.cfa-field-icon input,
.cfa-field-icon select{
width:100%;
height:40px;
padding:0 10px 0 35px;
border:1px solid var(--border);
border-radius:6px;
background:transparent;
outline:0
}

.cfa-field-icon input:focus,
.cfa-field-icon select:focus,
#editNote:focus{
border-color:var(--blue);
box-shadow:0 0 0 2px rgba(22,137,232,.09)
}

.cfa-field-icon.has-action input{
padding-right:41px
}

.cfa-field-icon.has-action button{
position:absolute;
right:4px;
top:4px;
width:31px;
height:31px;
border:0;
border-radius:5px;
background:var(--soft)
}

.cfa-full{
margin-top:10px
}

#editNote{
width:100%;
min-height:90px;
padding:9px;
border:1px solid var(--border);
border-radius:6px;
resize:vertical;
background:transparent;
outline:0
}


/* DATES */
.cfa-date-actions{
display:flex;
justify-content:flex-end;
gap:5px;
margin-top:7px
}

.cfa-date-actions button{
padding:6px 8px;
border:1px solid var(--border);
border-radius:5px;
background:transparent;
font-size:.61em
}


/* STATUS MESSAGE */
.cfa-editor-state{
display:flex;
align-items:center;
gap:7px;
margin-top:10px;
padding:9px;
border-radius:6px;
background:rgba(22,137,232,.07);
font-size:.64em
}

.cfa-editor-state i{
color:var(--blue)
}


/* EDIT BUTTONS */
.cfa-editor-buttons{
display:flex;
justify-content:flex-end;
gap:6px;
margin-top:10px
}

.cfa-editor-buttons button{
display:flex;
align-items:center;
gap:5px;
padding:9px 11px;
border-radius:6px;
font-size:.68em;
font-weight:700
}

.cfa-editor-buttons .secondary{
border:1px solid var(--border);
background:transparent
}

.cfa-editor-buttons .primary{
border:0;
background:var(--blue);
color:#fff
}


/* DARK MODE */
#cfAdmin.dark{
background:#091923;
color:#dce8ef
}

#cfAdmin.dark .cfa-topbar{
background:rgba(10,27,38,.94)
}

#cfAdmin.dark .cfa-panel,
#cfAdmin.dark .cfa-editor-form,
#cfAdmin.dark .cfa-editor-search,
#cfAdmin.dark .cfa-summary article{
background:#0c202d
}

#cfAdmin.dark input,
#cfAdmin.dark select,
#cfAdmin.dark textarea,
#cfAdmin.dark button{
color:#dce8ef
}


/* MOBILE OVERLAY */
.cfa-overlay{
display:none
}


/* TABLET */
@media(max-width:1050px){

.cfa-tools{
grid-template-columns:1fr 1fr
}

.cfa-summary{
grid-template-columns:repeat(2,1fr)
}

}


/* MOBILE SIDEBAR */
@media(max-width:900px){

.cfa-sidebar{
transform:translateX(-105%);
transition:transform .22s ease
}

#cfAdmin.menu-open .cfa-sidebar{
transform:translateX(0)
}

.cfa-main{
margin-left:0
}

.cfa-menu,
#cfaSideClose{
display:block
}

#cfAdmin.menu-open .cfa-overlay{
display:block;
position:fixed;
z-index:60;
inset:0;
background:rgba(0,0,0,.45)
}

.cfa-editor-layout{
grid-template-columns:1fr
}

.cfa-editor-search-results{
max-height:250px
}

}


/* MOBILE */
@media(max-width:600px){

.cfa-content{
padding:10px
}

.cfa-topbar{
height:61px;
padding:0 10px
}

.cfa-top-left p{
display:none
}

.cfa-add span{
display:none
}

.cfa-summary{
gap:6px
}

.cfa-summary article{
padding:9px
}

.cfa-tools{
grid-template-columns:1fr
}

.cfa-editor-head{
align-items:flex-start;
flex-direction:column
}

.cfa-mode-switch{
width:100%
}

.cfa-mode-switch button{
flex:1;
justify-content:center
}

.cfa-form-grid{
grid-template-columns:1fr
}

.cfa-date-actions{
display:grid;
grid-template-columns:1fr 1fr
}

.cfa-date-actions button{
justify-content:center
}

.cfa-editor-buttons{
display:grid;
grid-template-columns:1fr 1fr
}

.cfa-editor-buttons button{
justify-content:center
}

}


/* SMALL MOBILE */
@media(max-width:390px){

.cfa-summary{
grid-template-columns:1fr 1fr
}

.cfa-summary article{
align-items:flex-start;
flex-direction:column
}

}