*{margin:0;padding:0;box-sizing:border-box;transition:all .2s ease}
:root{--bg:#080808;--bg2:#111111;--bg3:#1a1a1a;--border:#222222;--text:#ffffff;--text2:#a0a0a0;--muted:#666666;--accent:#ffffff;--success:#10b981;--error:#ef4444}
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;margin:0;min-height:100vh;overflow-x:hidden}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.hidden{display:none!important}
.login-overlay{position:fixed;inset:0;background:var(--bg);z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;overflow-y:auto}
.login-box{max-width:360px;width:100%;padding:3rem;background:var(--bg2);border:1px solid var(--border);border-radius:24px;box-shadow:0 20px 40px rgba(0,0,0,0.4);margin-top:auto;margin-bottom:auto}

.landing-footer {
    width: 100%;
    max-width: 900px;
    margin-top: 4rem;
    padding: 3rem 0;
    border-top: 1px solid var(--border);
    text-align: center;
}

.landing-content {
    display: grid;
    gap: 1.5rem;
    text-align: left;
    border-top: 1px solid var(--border);
    padding-top: 2rem;
}

.feature h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.feature p {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.legal-links {
    margin-top: 2rem;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.legal-links a {
    color: var(--text-dim);
    text-decoration: none;
    margin: 0 0.5rem;
}

.legal-links a:hover {
    color: var(--text);
}
.login-box h1{font-size:2rem;font-weight:800;margin-bottom:.5rem;letter-spacing:-0.04em}
.login-box p{color:var(--muted);font-size:.875rem;margin-bottom:2rem;font-weight:500}
.login-box input{width:100%;padding:.85rem 1rem;background:var(--bg3);border:1px solid var(--border);border-radius:12px;font-size:.9rem;margin-bottom:1.15rem;color:var(--text)}
.login-box input:focus{outline:none;border-color:var(--muted);box-shadow:0 0 0 1px var(--muted)}
.login-box button{width:100%;padding:.85rem;background:var(--text);color:var(--bg);border:none;border-radius:12px;font-weight:700;cursor:pointer}
.login-box button:hover{opacity:0.9;transform:translateY(-1px)}
.login-error{color:var(--error);font-size:.85rem;margin-top:1rem;text-align:center;font-weight:600}

.header{padding:.75rem 2rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:rgba(8,8,8,0.8);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100}
.logo{font-size:1.25rem;font-weight:800;letter-spacing:-0.03em;color:var(--accent)}
.nav{display:flex;gap:.75rem}
.nav button{padding:.6rem 1.15rem;background:none;border:1px solid var(--border);border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--text2);white-space:nowrap}
.nav button:hover{background:var(--bg2);border-color:var(--muted)}
.nav button.active{background:var(--accent);color:var(--bg);border-color:var(--accent);box-shadow:0 0 15px rgba(255,255,255,0.1)}
.logout-btn{padding:.6rem 1.15rem;background:none;border:1px solid var(--border);border-radius:10px;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--muted)}
.logout-btn:hover{color:var(--error);border-color:var(--error);background:rgba(239,68,68,0.05)}

.main{max-width:1200px;margin:0 auto;padding:2rem}
.view{display:none;animation:fadeIn 0.3s ease-out;flex-direction:column;gap:2rem}
.view.active{display:flex}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.stats{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.stat{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1rem;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.2);flex:1;min-width:180px;max-width:240px}
.stat-value{font-size:1.5rem;font-weight:800;letter-spacing:-0.03em;color:var(--text)}
.stat-label{font-size:.65rem;color:var(--muted);text-transform:uppercase;font-weight:800;letter-spacing:0.1em;margin-top:.25rem}

.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;gap:1rem}
.section-title{font-size:1.35rem;font-weight:800;letter-spacing:-0.02em}

.scripts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:1.5rem}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:1.5rem;position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.2)}
.card:hover{border-color:var(--muted);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.card-header{margin-bottom:1rem;display:flex;flex-direction:column;gap:0.25rem}
.card-name{font-size:1.15rem;font-weight:700;letter-spacing:-0.01em;display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem}
.card-id{font-size:.7rem;color:var(--muted);font-family:monospace;letter-spacing:0}
.badge{display:inline-flex;align-items:center;font-size:.65rem;padding:.3rem .7rem;border-radius:100px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em}
.badge-private{background:rgba(255,255,255,0.05);color:var(--text2);border:1px solid var(--border)}
.badge-public{background:rgba(16,185,129,0.1);color:var(--success);border:1px solid rgba(16,185,129,0.2)}
.badge-disabled{background:rgba(239,68,68,0.1);color:var(--error);border:1px solid rgba(239,68,68,0.2)}
.card-meta{display:flex;gap:1.25rem;font-size:.8rem;color:var(--text2);margin-bottom:1.25rem;font-weight:500}
.card-meta span{display:flex;align-items:center;gap:0.35rem}
.card-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:0.5rem}

.loadstring-box{margin-top:1.25rem;padding:1rem;background:var(--bg2);border:1px solid var(--border);border-radius:10px;font-family:'JetBrains Mono',monospace;font-size:.7rem;word-break:break-all;cursor:pointer;position:relative;color:var(--text2);line-height:1.4}
.loadstring-box:hover{background:var(--bg3);color:var(--text)}
.loadstring-box::after{content:'Click to copy';position:absolute;top:0;right:0;padding:.25rem .5rem;font-size:.55rem;text-transform:uppercase;color:var(--muted);font-weight:700;background:rgba(255,255,255,0.02)}

.btn{padding:.65rem 1.25rem;border-radius:10px;font-size:.85rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;white-space:nowrap}
.btn:hover{background:var(--bg2);transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn-primary:hover{opacity:0.9;transform:translateY(-1px)}
.btn-danger{background:transparent;color:var(--error);border-color:var(--error)}
.btn-danger:hover{background:var(--error);color:var(--text)}
.btn-sm{padding:.45rem .9rem;font-size:.75rem;border-radius:8px}

.maker-layout{display:flex;height:100%;width:100%;background:var(--bg2);border:1px solid var(--border);overflow:hidden}
.maker-sidebar{width:320px;padding:1.5rem;border-right:1px solid var(--border);background:rgba(255,255,255,0.01);overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem}
.maker-main{flex:1;display:flex;flex-direction:column;background:var(--bg)}
.maker-section{display:flex;flex-direction:column;gap:.75rem}
.maker-input{margin:0!important;background:var(--bg3)}
.security-compact{display:grid;grid-template-columns:1fr;gap:.5rem;background:var(--bg3);padding:.75rem;border-radius:12px;border:1px solid var(--border)}
.compact-toggle{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:8px;cursor:pointer;transition:all .2s ease}
.compact-toggle:hover{background:rgba(255,255,255,0.03)}
.toggle-name{font-size:.8rem;font-weight:700;color:var(--text2)}
.maker-main-header{padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);background:var(--bg2)}
.maker-title{font-size:.85rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em}
.maker-header-actions{display:flex;gap:.5rem}
.maker-actions{margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--border)}
.security-presets{display:grid;grid-template-columns:1fr;gap:1rem}
.security-option{display:flex;align-items:flex-start;gap:1rem;background:var(--bg3);padding:1.25rem;border-radius:16px;border:1px solid var(--border);cursor:pointer;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1)}
.security-option:hover{border-color:var(--muted);background:var(--bg2)}
.security-option.active{border-color:var(--accent);background:rgba(255,255,255,0.02)}
.security-info{display:flex;flex-direction:column;gap:.25rem}
.security-name{font-size:.9rem;font-weight:700;color:var(--text)}
.security-desc{font-size:.75rem;color:var(--text2);line-height:1.4}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{margin-bottom:1.25rem}
.form-label{display:block;font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:.6rem;text-transform:uppercase;letter-spacing:0.05em}
.form-input{width:100%;padding:.85rem 1rem;background:var(--bg3);border:1px solid var(--border);border-radius:12px;font-size:.9rem;color:var(--text);font-family:inherit;transition:all .2s ease}
.form-input:focus{outline:none;border-color:var(--muted);box-shadow:0 0 0 1px var(--muted)}

.monaco-container{height:350px;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.02)}

.history-list{margin-top:1.5rem;display:flex;flex-direction:column;gap:1.25rem}
.history-item{padding:1.25rem;border:1px solid var(--border);border-radius:14px;background:var(--bg2);display:flex;justify-content:space-between;align-items:flex-start}
.history-meta{flex:1}
.history-version{font-weight:800;font-size:1.25rem;color:var(--accent);margin-bottom:.35rem;letter-spacing:-0.02em}
.history-date{font-size:.8rem;color:var(--muted);margin-bottom:.75rem;font-weight:500}
.history-preview{font-family:monospace;font-size:.75rem;padding:.75rem;background:var(--bg);border:1px solid var(--border);border-radius:10px;max-height:120px;overflow:hidden;color:var(--text2);line-height:1.4}
.history-item .btn{margin-left:1.5rem}

.toggle-row{display:flex;align-items:center;gap:.85rem;background:var(--bg2);padding:.75rem 1rem;border-radius:10px;border:1px solid var(--border);cursor:pointer}
.toggle-row span{font-size:.85rem;font-weight:600;color:var(--text2)}
.toggle{width:42px;height:24px;background:var(--bg3);border:1px solid var(--border);border-radius:12px;cursor:pointer;position:relative;flex-shrink:0}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--text);border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,0.3)}
.toggle.on{background:var(--accent);border-color:var(--accent)}
.toggle.on::after{left:21px;background:var(--bg)}

.form-actions{margin-top:2.5rem;display:flex;gap:1rem}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:500;display:none;align-items:center;justify-content:center;padding:1.5rem}
.modal-overlay.active{display:flex}
.modal{background:var(--bg);border-radius:20px;width:100%;max-width:750px;max-height:90vh;overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,0.2);animation:modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1)}
@keyframes modalIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.modal-header{padding:1.5rem 2rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-title{font-size:1.25rem;font-weight:800;letter-spacing:-0.02em}
.modal-close{background:var(--bg2);border:none;font-size:1.5rem;cursor:pointer;color:var(--muted);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--bg3);color:var(--text)}
.modal-body{padding:2rem}
.modal-actions{display:flex;justify-content:space-between;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}

.toast-container{position:fixed;bottom:2rem;right:2rem;z-index:1001;display:flex;flex-direction:column;gap:0.75rem}
.toast{padding:1rem 1.5rem;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,0.4);font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:0.75rem;animation:toastIn 0.3s ease-out;color:var(--text)}
@keyframes toastIn{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
.toast.success{border-left:4px solid var(--success)}
.toast.error{border-left:4px solid var(--error)}
.empty{text-align:center;padding:5rem;color:var(--muted);grid-column:1/-1;font-weight:500}

/* Mobile Improvements */
@media(max-width:1024px) {
    .scripts-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

@media(max-width:768px){
    .header { padding: 1rem 1.5rem; flex-direction: column; gap: 1rem; height: auto; }
    .nav { width: 100%; overflow-x: auto; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; }
    .nav::-webkit-scrollbar { display: none; }
    .nav button { padding: .5rem .85rem; font-size: .8rem; }
    .logo { margin-bottom: .25rem; }
    .logout-btn { position: absolute; top: 1rem; right: 1.5rem; padding: .45rem .75rem; font-size: .75rem; }
    
    .main { padding: 1.5rem 1rem; }
    .stats { gap: .75rem; }
    .stat { min-width: 45%; padding: 1.25rem 1rem; }
    .stat-value { font-size: 1.5rem; }
    
    .section-header { flex-direction: row; align-items: center; }
    .section-title { font-size: 1.15rem; }
    
    .scripts-grid { grid-template-columns: 1fr; gap: 1rem; }
    .card { padding: 1.25rem; }
    .card-name { font-size: 1.05rem; }
    
    .form-card { padding: 1.5rem; border-radius: 16px; }
    .form-grid { grid-template-columns: 1fr; gap: 1rem; }
    .monaco-container { height: 300px; }
    
    .history-item { flex-direction: column; gap: 1rem; }
    .history-item .btn { margin-left: 0; width: 100%; }
    
    .modal { border-radius: 0; height: 100%; max-height: 100%; width: 100%; border: none; }
    .modal-header { padding: 1rem 1.5rem; }
    .modal-body { padding: 1.5rem; }
    
    .toast-container { bottom: 1rem; right: 1rem; left: 1rem; }
    .toast { width: 100%; }
}

@media(max-width:480px) {
    .stat { min-width: 100%; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions .btn { width: 100%; }
    .modal-actions { flex-direction: column-reverse; gap: 0.75rem; }
    .modal-actions .btn { width: 100%; }
}