@import url("fonts.css");
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700&display=swap");

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;overflow-x:hidden}
html{line-height:1.15;-webkit-text-size-adjust:100%;scrollbar-color:#b9bbbe #202225;scrollbar-width:thin}
body{margin:0}
a{background-color:transparent;text-decoration:none;color:inherit}
button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;border:none;outline:none}
button{cursor:pointer;background:none}
img{border-style:none;max-width:100%}
::-webkit-scrollbar{width:6px;height:6px;background-color:#202225}
::-webkit-scrollbar-thumb{background-color:#b9bbbe;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background-color:rgba(185,187,190,.8)}

/* Variables */
:root{
    --orange:#d76843;
    --light-gray:#2f3136;
    --dark-gray:rgb(33,35,38);
    --text-gray:#b9bbbe;
    --green:#5daf61;
    --red:#d24a44;
    --yellow:#d7a843;
    --blue:#5865f2;
    --nav-height:60px;
    --sidebar-width:220px;
}

/* Body with responsive SVG backgrounds */
body{
    font-family:"Raleway",-apple-system,BlinkMacSystemFont,sans-serif;
    color:var(--text-gray);
    font-weight:400;
    font-size:15px;
    background-color:var(--dark-gray);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

@media(max-width:420px){
    body{background:url('https://reproxy.network/img/Speedline-50s-420px.svg') no-repeat center center fixed;background-size:cover}
}
@media(min-width:421px) and (max-width:768px){
    body{background:url('https://reproxy.network/img/Speedline-50s-768px.svg') no-repeat center center fixed;background-size:cover}
}
@media(min-width:769px) and (max-width:1024px){
    body{background:url('https://reproxy.network/img/Speedline-50s-1024px.svg') no-repeat center center fixed;background-size:cover}
}
@media(min-width:1025px){
    body{background:url('https://reproxy.network/img/Speedline-50s-2168px.svg') no-repeat center center fixed;background-size:cover}
}

/* Typography */
h1,h2,h3{margin:0;color:#fff;font-weight:400}
h1{font-size:28px}
h2{font-size:22px;text-shadow:0 0 10px #000}
h3{font-size:16px}
p{margin:0}
b{color:#fff;font-weight:500}
code{font-family:Consolas,Monaco,monospace;background:var(--dark-gray);padding:2px 6px;border-radius:3px;font-size:13px}

/* Buttons */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:10px 24px;
    color:#fff;
    border:1px solid #fff;
    text-transform:uppercase;
    font-size:13px;font-weight:400;letter-spacing:.5px;
    font-family:"Raleway",sans-serif;
    border-radius:0;
    transition:all .2s ease;
}
.btn:hover{color:var(--orange);border-color:var(--orange)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.btn-primary{background:var(--orange);border-color:var(--orange)}
.btn-primary:hover{background:#c55a38;border-color:#c55a38;color:#fff}

.btn-danger{border-color:var(--red);color:var(--red)}
.btn-danger:hover{background:var(--red);color:#fff}

.btn-success{border-color:var(--green);color:var(--green)}
.btn-success:hover{background:var(--green);color:#fff}

.btn-warning{border-color:var(--yellow);color:var(--yellow)}
.btn-warning:hover{background:var(--yellow);color:#000}

.btn-sm{padding:6px 14px;font-size:12px}
.btn-icon{padding:8px;width:34px;height:34px}

/* Form Elements */
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:8px;font-size:13px;color:var(--text-gray);text-transform:uppercase;letter-spacing:.5px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:500px){.form-row{grid-template-columns:1fr}}

input[type="text"],input[type="number"],input[type="password"],input[type="email"],select{
    width:100%;
    padding:12px 0 12px 0;
    background:none;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.2);
    color:#fff;
    font-size:14px;
    font-family:"Raleway",sans-serif;
    transition:all .2s ease;
    box-sizing:border-box;
}

/* Input with icon - must come after base input styles */
.input-wrap{position:relative;display:block}
.input-wrap i.mdi{position:absolute;left:0;top:10px;color:var(--text-gray);font-size:20px;pointer-events:none;width:28px;text-align:center}
.input-wrap input[type="text"],
.input-wrap input[type="number"],
.input-wrap input[type="password"],
.input-wrap input[type="email"]{padding-left:40px}
.input-wrap select{padding-left:40px}

input:focus,select:focus,textarea:focus{border-bottom-color:var(--orange);color:#fff}
input::placeholder,textarea::placeholder{color:var(--text-gray);opacity:.6}

/* Required field - red border when empty and touched */
input.invalid,select.invalid,textarea.invalid{border-bottom-color:var(--red) !important}
.input-wrap.invalid i{color:var(--red)}

/* Hide native input controls */
input[type="date"],input[type="number"]{
    color-scheme:dark;
    cursor:pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator{
    display:none;
    -webkit-appearance:none;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button{
    display:none;
    -webkit-appearance:none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
input[type="number"]{
    -moz-appearance:textfield;
}

select{
    cursor:pointer;
    background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%23b9bbbe' d='M6 8L1 3h10z'/%3e%3c/svg%3e") no-repeat right 0 center;
    -webkit-appearance:none;
    -moz-appearance:none;
    font-family:"Raleway",sans-serif;
    padding-right:24px !important;
}
select option{background:var(--dark-gray);color:var(--text-gray);font-family:"Raleway",sans-serif}

textarea{
    min-height:100px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:4px;
    resize:none;
    padding:12px;
    font-family:"Raleway",sans-serif;
    background:var(--dark-gray);
}
textarea:focus{border-color:var(--orange)}

/* Checkbox */
.checkbox-wrap{display:flex;align-items:center;gap:10px;cursor:pointer}
.checkbox-wrap input{display:none}
.checkbox-box{
    width:20px;height:20px;
    border:1px solid var(--text-gray);
    border-radius:3px;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s;
}
.checkbox-wrap input:checked + .checkbox-box{background:var(--orange);border-color:var(--orange)}
.checkbox-wrap input:checked + .checkbox-box::after{content:'✓';color:#fff;font-size:12px}

/* Layout */
.app{display:flex;min-height:100vh;width:100%}

/* Sidebar */
.sidebar{
    width:var(--sidebar-width);
    min-width:var(--sidebar-width);
    max-width:var(--sidebar-width);
    background:var(--light-gray);
    position:fixed;
    top:0;left:0;
    height:100vh;
    z-index:100;
    display:flex;
    flex-direction:column;
    box-shadow:2px 0 10px rgba(0,0,0,.3);
    transition:transform .3s ease;
}
.sidebar-header{
    padding:16px 20px;
    border-bottom:1px solid rgba(255,255,255,.05);
    height:var(--nav-height);
    display:flex;
    align-items:center;
    box-sizing:border-box;
}
.sidebar-logo{display:flex;align-items:center;gap:12px}
.sidebar-logo-icon{
    width:36px;height:36px;
    background:linear-gradient(135deg,var(--orange),#c55a38);
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    font-size:18px;color:#fff;
}
.sidebar-logo h1{font-size:16px;font-weight:500}
.sidebar-logo span{font-size:11px;color:var(--text-gray);display:block;margin-top:2px}

.sidebar-nav{flex:1;padding:16px 0;overflow-y:auto;width:100%}
.nav-item{
    display:flex;align-items:center;gap:12px;
    padding:12px 20px;
    color:var(--text-gray);
    transition:all .2s;
    cursor:pointer;
    border-left:3px solid transparent;
    box-sizing:border-box;
    width:100%;
}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.03)}
.nav-item.active{color:var(--orange);background:rgba(215,104,67,.08);border-left-color:var(--orange)}
.nav-item i{font-size:18px;width:22px;text-align:center}

.sidebar-footer{padding:16px;border-top:1px solid rgba(255,255,255,.05)}

/* Main Content */
.main{
    flex:1;
    margin-left:220px;
    min-height:100vh;
    width:calc(100% - 220px);
}

.topbar{
    height:var(--nav-height);
    background:var(--light-gray);
    border-bottom:1px solid rgba(255,255,255,.05);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 24px;
    position:sticky;top:0;
    z-index:50;
    box-shadow:0 2px 10px rgba(0,0,0,.2);
    width:100%;
}
.topbar-left{display:flex;align-items:center;gap:16px}
.menu-btn{display:none;color:var(--text-gray);font-size:22px;padding:8px;transition:color .2s}
.menu-btn:hover{color:var(--orange)}

.content{padding:24px;max-width:100%;box-sizing:border-box}

/* Page Header */
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px;width:100%}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px;width:100%}
.stat-card{
    background:var(--light-gray);
    padding:20px;
    box-shadow:0 4px 15px rgba(0,0,0,.3);
    width:100%;
}
.stat-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.stat-icon{
    width:44px;height:44px;
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;
}
.stat-icon.orange{background:rgba(215,104,67,.15);color:var(--orange)}
.stat-icon.green{background:rgba(93,175,97,.15);color:var(--green)}
.stat-icon.yellow{background:rgba(215,168,67,.15);color:var(--yellow)}
.stat-icon.red{background:rgba(210,74,68,.15);color:var(--red)}

.stat-value{font-size:28px;color:#fff;font-weight:500}
.stat-label{font-size:13px;color:var(--text-gray);margin-top:4px}

/* Table */
.table-card{background:var(--light-gray);box-shadow:0 4px 15px rgba(0,0,0,.3);overflow:hidden;width:100%}
.table-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:16px 20px;
    border-bottom:1px solid rgba(255,255,255,.05);
    flex-wrap:wrap;gap:12px;
}
.table-filters{display:flex;gap:12px;flex-wrap:wrap}
.search-box{
    position:relative;
    min-width:220px;
}
.search-box i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-gray);font-size:16px;z-index:1}
.search-box input{
    padding:10px 10px 10px 38px;
    background:var(--dark-gray);
    border:1px solid rgba(255,255,255,.08);
    border-radius:4px;
    width:100%;
    font-family:"Raleway",sans-serif;
}
.search-box input:focus{border-color:var(--orange)}

.filter-select{
    min-width:140px;
    padding:10px 32px 10px 12px;
    background:var(--dark-gray) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%23b9bbbe' d='M6 8L1 3h10z'/%3e%3c/svg%3e") no-repeat right 10px center;
    border:1px solid rgba(255,255,255,.08);
    border-radius:4px;
    font-family:"Raleway",sans-serif;
    color:var(--text-gray);
}

.table-wrap{overflow-x:auto;width:100%}
table{width:100%;border-collapse:collapse;table-layout:auto}
th{text-align:left;padding:12px 16px;color:#fff;font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid rgba(255,255,255,.1)}
td{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.03);font-size:14px}
tr:hover{background:rgba(255,255,255,.02)}
tr:last-child td{border-bottom:none}

/* Badges */
.badge{
    display:inline-block;
    padding:4px 10px;
    border-radius:3px;
    font-size:11px;
    font-weight:500;
    text-transform:uppercase;
}
.badge-success{background:rgba(93,175,97,.15);color:var(--green)}
.badge-warning{background:rgba(215,168,67,.15);color:var(--yellow)}
.badge-danger{background:rgba(210,74,68,.15);color:var(--red)}
.badge-info{background:rgba(215,104,67,.15);color:var(--orange)}
.badge-frozen{background:rgba(88,101,242,.15);color:var(--blue)}

/* License Key */
.license-key{
    font-family:Consolas,monospace;
    font-size:12px;
    background:var(--dark-gray);
    padding:4px 8px;
    border-radius:3px;
    cursor:pointer;
    transition:color .2s;
}
.license-key:hover{color:var(--orange)}

/* Actions */
.actions{display:flex;gap:4px;flex-wrap:wrap}
.action-btn{
    width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;
    color:var(--text-gray);
    border-radius:4px;
    transition:all .2s;
    font-size:14px;
}
.action-btn:hover{background:rgba(255,255,255,.08);color:var(--orange)}
.action-btn.danger:hover{color:var(--red)}
.action-btn.success:hover{color:var(--green)}
.action-btn.warning:hover{color:var(--yellow)}

/* Machines */
.machines{font-size:13px}
.machines-count{color:var(--orange);font-weight:500}

/* Modal */
.modal-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,.8);
    display:flex;align-items:center;justify-content:center;
    z-index:1000;
    padding:20px;
    opacity:0;
    visibility:hidden;
    transition:all .25s ease;
}
.modal-overlay.active{opacity:1;visibility:visible}

.modal{
    background:var(--light-gray);
    width:100%;
    max-width:480px;
    max-height:90vh;
    overflow-y:auto;
    box-shadow:0 20px 50px rgba(0,0,0,.5);
    transform:translateY(-20px) scale(.95);
    transition:all .25s ease;
}
.modal-overlay.active .modal{transform:translateY(0) scale(1)}

.modal-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:20px;
    border-bottom:1px solid rgba(255,255,255,.05);
}
.modal-header h3{font-size:18px}
.modal-close{
    color:var(--text-gray);
    font-size:28px;
    line-height:1;
    transition:color .2s;
    padding:0;
}
.modal-close:hover{color:var(--orange)}

.modal-body{padding:20px}
.modal-footer{
    padding:20px;
    border-top:1px solid rgba(255,255,255,.05);
    display:flex;justify-content:flex-end;gap:12px;
}

/* Confirm Modal */
.confirm-icon{
    width:60px;height:60px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:28px;
    margin:0 auto 20px;
}
.confirm-icon.danger{background:rgba(210,74,68,.15);color:var(--red)}
.confirm-icon.warning{background:rgba(215,168,67,.15);color:var(--yellow)}
.confirm-icon.success{background:rgba(93,175,97,.15);color:var(--green)}
.confirm-icon.info{background:rgba(215,104,67,.15);color:var(--orange)}

.confirm-title{text-align:center;color:#fff;margin-bottom:8px;font-size:18px}
.confirm-text{text-align:center;color:var(--text-gray);line-height:1.6}

/* Toast */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:2000;display:flex;flex-direction:column;gap:12px}
.toast{
    background:var(--light-gray);
    padding:14px 20px;
    display:flex;align-items:center;gap:12px;
    min-width:280px;
    box-shadow:0 8px 30px rgba(0,0,0,.4);
    border-left:4px solid var(--text-gray);
    animation:slideIn .3s ease;
}
.toast.success{border-left-color:var(--green)}
.toast.error{border-left-color:var(--red)}
.toast.info{border-left-color:var(--orange)}
.toast i{font-size:18px}
.toast.success i{color:var(--green)}
.toast.error i{color:var(--red)}
.toast.info i{color:var(--orange)}

@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* Login */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{
    background:var(--light-gray);
    padding:40px;
    width:100%;
    max-width:420px;
    box-shadow:0 20px 50px rgba(0,0,0,.5);
    text-align:center;
}
.login-logo{
    width:70px;height:70px;
    background:linear-gradient(135deg,var(--orange),#c55a38);
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 24px;
    font-size:32px;color:#fff;
}
.login-card h1{margin-bottom:8px}
.login-card>p{margin-bottom:32px}
.login-card .form-group{text-align:left}
.login-card textarea{
    border:1px solid rgba(255,255,255,.1);
    border-radius:4px;
    background:var(--dark-gray);
    min-height:120px;
}
.login-card textarea:focus{border-color:var(--orange)}
.login-card button{width:100%;margin-top:16px}
.login-footer{margin-top:32px;font-size:12px;color:var(--text-gray)}
.error-msg{color:var(--red);font-size:13px;margin-top:8px;display:none}
.error-msg.show{display:block}

/* Card */
.card{background:var(--light-gray);padding:24px;box-shadow:0 4px 15px rgba(0,0,0,.3);margin-bottom:20px;width:100%}
.card-header{font-weight:500;color:#fff;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:16px}

/* Code Block */
.code-block{
    background:var(--dark-gray);
    border:1px solid rgba(255,255,255,.05);
    font-family:Consolas,Monaco,monospace;
    font-size:13px;
    overflow-x:auto;
}
.code-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:12px 16px;
    background:rgba(0,0,0,.2);
    border-bottom:1px solid rgba(255,255,255,.05);
}
.code-header span{color:#fff;font-weight:500}
.code-content{padding:16px;white-space:pre;line-height:1.6}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tab{
    padding:10px 18px;
    background:var(--dark-gray);
    border:1px solid rgba(255,255,255,.08);
    color:var(--text-gray);
    font-size:13px;
    cursor:pointer;
    transition:all .2s;
}
.tab:hover{border-color:var(--orange);color:#fff}
.tab.active{background:var(--orange);border-color:var(--orange);color:#fff}

/* Settings */
.settings-section{background:var(--light-gray);margin-bottom:16px;box-shadow:0 4px 15px rgba(0,0,0,.3);width:100%}
.settings-header{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.05);color:#fff;font-weight:500;display:flex;align-items:center;gap:10px}
.settings-header i{font-size:18px;color:var(--orange)}
.settings-body{padding:20px}
.settings-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.03)}
.settings-row:last-child{border-bottom:none}

/* Empty State */
.empty{text-align:center;padding:60px 20px;color:var(--text-gray)}
.empty i{font-size:48px;opacity:.3;margin-bottom:16px}
.empty h3{color:#fff;margin-bottom:8px}

/* Loading */
.loading{display:flex;justify-content:center;align-items:center;min-height:200px}
.spinner{
    width:36px;height:36px;
    border:3px solid var(--light-gray);
    border-top-color:var(--orange);
    border-radius:50%;
    animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Mobile */
@media(max-width:900px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.open{transform:translateX(0)}
    .main{margin-left:0;width:100%}
    .menu-btn{display:block}
    .sidebar-overlay{
        position:fixed;inset:0;
        background:rgba(0,0,0,.6);
        z-index:99;
        display:none;
    }
    .sidebar-overlay.active{display:block}
}

@media(max-width:768px){
    .content{padding:16px}
    .page-header{flex-direction:column;align-items:flex-start}
    .table-header{flex-direction:column;align-items:stretch}
    .table-filters{flex-direction:column}
    .search-box{min-width:100%}
    .stats{grid-template-columns:1fr 1fr}
    .toast-container{left:16px;right:16px}
    .toast{min-width:auto}
    .modal{margin:16px}
    .hide-mobile{display:none !important}
}

@media(max-width:480px){
    .stats{grid-template-columns:1fr}
    .login-card{padding:24px}
    h2{font-size:18px}
}

/* Utilities */
.text-orange{color:var(--orange)}
.text-green{color:var(--green)}
.text-red{color:var(--red)}
.text-gray{color:var(--text-gray)}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.mb-16{margin-bottom:16px}
.hidden{display:none !important}