:root{ --bg:#05070b; --bg2:#11141c; --text:#e6e8ea; --accent:#f0b90b; /* giallo binance */ --card:#11141c; --line:#20252f; --danger:#ff4d4d; } *{ box-sizing:border-box; } body{ margin:0; background:var(--bg); color:var(--text); font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } /* ========= LOGIN / REGISTER PAGE ========= */ /* solo sulle pagine con */ body.login-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:#05070b; } .login-container{ width: 360px; max-width: 100%; background: var(--bg2); border-radius: 12px; padding: 24px 22px; border:1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,0.5); } .login-container h2{ margin-top:0; margin-bottom:15px; } .login-container label{ font-size:14px; margin-bottom:4px; display:block; } .login-container input{ width:100%; padding:10px 12px; margin-bottom:12px; border-radius:8px; border:1px solid var(--line); background:#1a1f26; color:var(--text); } .login-container input:focus{ outline:none; border-color:var(--accent); } .btn-binance{ width:100%; padding:10px 14px; border:none; border-radius:8px; background:var(--accent); color:#000; font-weight:700; cursor:pointer; } .btn-binance:hover{ background:#ffca2c; } .login-container .small{ margin-top:12px; font-size:13px; text-align:center; } .login-container .small a{ color:var(--accent); text-decoration:none; } .login-container .small a:hover{ text-decoration:underline; } .error{ background:#a40028; color:#fff; padding:8px 10px; border-radius:6px; margin-bottom:10px; font-size:14px; text-align:center; } @media (max-width: 480px){ .login-container{ padding: 20px 18px; margin: 0 16px; } } /* ========= LAYOUT LOGGATO (SIDEBAR + CONTENT) ========= */ .wrapper{ display:flex; min-height:100vh; background:var(--bg); } /* ===== Sidebar ===== */ .sidebar{ width: 250px; background: #050608; border-right: 1px solid var(--line); padding: 12px 0 16px; position: relative; z-index: 9; } .sidebar-inner{ height: 100%; display: flex; flex-direction: column; } /* Header della sidebar (logo stile Binance) */ .sidebar-head{ display:flex; align-items:center; gap:10px; padding: 4px 18px 14px; border-bottom:1px solid rgba(148,163,184,0.15); margin-bottom: 8px; } .sidebar-logo-symbol{ width:32px; height:32px; border-radius:9px; background: radial-gradient(circle at 30% 30%, #facc15, #ca8a04 60%, #854d0e 100%); display:flex; align-items:center; justify-content:center; font-size:17px; color:#020617; box-shadow:0 0 20px rgba(250,204,21,0.35); } .sidebar-logo-text{ display:flex; flex-direction:column; gap:1px; } .sidebar-logo-text .brand-main{ font-size:14px; font-weight:700; letter-spacing:0.03em; } .sidebar-logo-text .brand-sub{ font-size:11px; color:#6b7280; } /* Nav */ .sidebar-nav{ padding: 6px 8px 0; flex:1; overflow-y:auto; } .nav-group-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:#6b7280; padding:10px 10px 4px; } .nav-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; margin:2px 4px; border-radius:8px; color:#e5e7eb; text-decoration:none; font-size:14px; position:relative; transition: background .12s ease, color .12s ease, transform .05s ease; } .nav-item .nav-ico{ width:22px; text-align:center; opacity:0.9; } .nav-item .nav-label{ flex:1; } /* stato normale / hover / active */ .nav-item:hover{ background:rgba(148,163,184,0.18); color:#f9fafb; } .nav-item.active{ background:rgba(250,204,21,0.12); color:var(--accent); } .nav-item.active::before{ content:""; position:absolute; left:-4px; top:8px; bottom:8px; width:2px; border-radius:999px; background:var(--accent); } /* Content area */ .content{ flex:1; padding: 20px 20px 24px; } /* Scrollbar sottile nella sidebar */ .sidebar-nav::-webkit-scrollbar{ width:5px; } .sidebar-nav::-webkit-scrollbar-thumb{ background:#1f2937; border-radius:999px; } .sidebar-nav::-webkit-scrollbar-track{ background:transparent; } /* ===== Responsive: su schermi piccoli la sidebar diventa overlay ===== */ @media (max-width: 992px){ .wrapper{ padding-top:56px; /* spazio per la topbar fixed */ } .sidebar{ position:fixed; top:56px; bottom:0; left:0; transform:translateX(-100%); transition:transform .18s ease-out; box-shadow:0 15px 40px rgba(0,0,0,0.6); } html.sidebar-open .sidebar{ transform:translateX(0); } .content{ padding:16px 14px 22px; } } /* Card stile Binance */ .card{ background:var(--card); border-radius:14px; padding:18px 18px; border:1px solid var(--line); color:#ffca2c; } /* KPI dashboard */ .kpi-card{ background:var(--card); border-radius:14px; padding:18px; border:1px solid var(--line); } .kpi-title{ font-size:13px; color:#a9b0bc; } .kpi-value{ font-size:22px; font-weight:700; margin-top:4px; color:var(--accent); } /* Toast (preparato per dopo) */ .toast-container{ position:fixed; top:20px; right:20px; z-index:9999; } .toast{ background:var(--card); border-left:4px solid var(--accent); color:var(--text); padding:10px 14px; border-radius:6px; margin-bottom:8px; font-size:14px; display:block !important; /* 👈 forziamo la visibilità */ opacity:0.98; transform:translateY(0); transition:opacity .25s ease, transform .25s ease; pointer-events:none; /* così non blocca i click sotto */ } /* ========= SELEZIONE TESTO ========= */ ::selection { background: var(--accent); color: #000; } input::selection, textarea::selection, select::selection { background: var(--accent); color: #000; } /* ========= INPUT / FORM BOOTSTRAP SU SFONDO SCURO ========= */ .form-control, .form-select { background-color: #1a1f26 !important; border-color: var(--line) !important; color: var(--text) !important; } .form-control:focus, .form-select:focus { background-color: #1a1f26 !important; border-color: var(--accent) !important; color: var(--text) !important; box-shadow: 0 0 0 0.15rem rgba(240,185,11,0.35) !important; } /* placeholder leggibili */ ::placeholder { color: #b7bdc6 !important; opacity: 1 !important; } /* ================================ FIX VISIBILITÀ TESTI IN CARD ADMIN ================================ */ .card h4, .card h3, .card h2, .card h5 { color: var(--text) !important; opacity: 1 !important; } .form-label, .card label { color: var(--text) !important; opacity: 0.85 !important; font-weight: 500; } h2 i, h2 svg, h2 span { color: var(--text) !important; } /* ================================ BANNER IMPERSONAMENTO ================================ */ .impersonate-banner { position: relative; border: 1px solid var(--accent); background: rgba(240,185,11,0.12); padding: 16px 18px; border-radius: 10px; animation: fadeIn .3s ease-out; } .impersonate-banner .title { font-size: 15px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 6px; } .impersonate-banner .desc { margin-top: 6px; font-size: 14px; color: var(--text); opacity: 0.85; } .impersonate-banner .badge-mode { position: absolute; top: 8px; right: 12px; background: var(--accent); color: #000; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; } .impersonate-banner .btn-return { margin-top: 10px; background: var(--accent); color: #000; font-weight: 700; padding: 8px 14px; border-radius: 8px; display: inline-block; font-size: 14px; text-decoration: none; } .impersonate-banner .btn-return:hover { background: #ffca2c; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ================================ MODALI STILE BINANCE ================================ */ .modal-content{ background: var(--bg2); border-radius: 12px; border: 1px solid var(--line); color: var(--text); } .modal-header{ border-bottom: 1px solid var(--line); } .modal-footer{ border-top: 1px solid var(--line); } .modal-title{ font-size: 16px; font-weight: 600; } .btn-secondary{ background: #1f2933; border-color: #111827; } .btn-secondary:hover{ background: #374151; } /* ================================ TOPBAR & USER CHIP (stile Binance) ================================ */ .topbar{ height:56px; background: #05070b; border-bottom:1px solid #161b22; display:flex; align-items:center; justify-content:space-between; padding:0 16px 0 18px; position:sticky; top:0; z-index:900; } .topbar-left .topbar-logo{ font-weight:700; letter-spacing:0.03em; color:var(--accent); } .topbar-right{ display:flex; align-items:center; gap:12px; position:relative; } /* Burger per mobile */ .btn-burger{ width:32px; height:32px; border-radius:8px; border:none; background:transparent; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; margin-right:10px; cursor:pointer; padding:0; } .btn-burger span{ width:18px; height:2px; border-radius:999px; background:#9ca3af; transition:transform .12s ease, opacity .12s ease; } @media (min-width: 993px){ .btn-burger{ display:none; } } .user-chip{ display:flex; align-items:center; gap:8px; padding:4px 10px; border-radius:999px; background:#11141c; border:1px solid #20252f; cursor:pointer; } .user-chip:hover{ background:#171b26; } .user-avatar{ width:28px; height:28px; border-radius:50%; background:#1f232b; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--accent); overflow:hidden; } .user-avatar img{ width:100%; height:100%; object-fit:cover; } .user-meta{ display:flex; flex-direction:column; gap:2px; } .user-name{ font-size:13px; font-weight:600; } .user-badges{ display:flex; gap:4px; flex-wrap:wrap; } /* Badge piano account */ .badge-plan{ font-size:11px; padding:1px 8px; border-radius:999px; font-weight:600; } /* 🎨 Piano: Demo (azzurro ⏱️), Premium (giallo 👑), Free (verde) */ .badge-plan-demo{ background:rgba(56,189,248,0.15); color:#38bdf8; } .badge-plan-premium{ background:rgba(240,185,11,0.18); color:#facc15; } .badge-plan-free{ background:rgba(34,197,94,0.18); color:#4ade80; } /* Piano ADMIN (arancione) */ .badge-plan-admin{ background: rgba(255,149,0,0.18); /* arancione leggero */ color: #ff9500; /* arancione vivo */ border: 1px solid rgba(255,149,0,0.45); font-weight: 600; } /* Badge stato (per tabella utenti ecc.) */ .badge-status{ font-size:11px; padding:1px 6px; border-radius:999px; font-weight:600; } .badge-status-active{ background:rgba(34,197,94,0.15); color:#4ade80; } .badge-status-disabled{ background:rgba(248,113,113,0.15); color:#fca5a5; } .user-caret{ font-size:10px; color:#a9b0bc; } /* Dropdown user info */ .user-menu{ position:absolute; top:46px; right:0; width:280px; background:#0f141b; border-radius:14px; border:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,0.7); padding:10px 12px 8px; display:none; z-index:1000; } .user-menu.open{ display:block; } .user-menu-header{ display:flex; align-items:center; gap:10px; padding:4px 0 8px; } .user-menu-header .avatar-big{ width:44px; height:44px; border-radius:50%; background:#111827; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--accent); overflow:hidden; } .user-menu-header .avatar-big img{ width:100%; height:100%; object-fit:cover; } .user-menu-header .user-name{ font-size:15px; font-weight:600; } .user-menu-header .user-role{ font-size:12px; color:#9ca3af; } .user-badge-line{ margin-top:4px; } .user-menu-row{ display:flex; justify-content:space-between; font-size:13px; color:#e5e7eb; padding:2px 2px; } .user-menu-row span:first-child{ color:#9ca3af; } .user-menu-link{ display:block; font-size:13px; padding:5px 2px; color:var(--text); text-decoration:none; } .user-menu-link:hover{ color:var(--accent); } /* ================================ SCELTA AVATAR (GRID) ================================ */ .avatar-grid{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; } .avatar-choice{ position:relative; cursor:pointer; } .avatar-choice input{ position:absolute; opacity:0; pointer-events:none; } .avatar-thumb{ width:40px; height:40px; border-radius:999px; background:#111827; display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px solid transparent; transition:border-color .15s ease, transform .08s ease; } .avatar-thumb img{ width:100%; height:100%; object-fit:cover; } .avatar-choice:hover .avatar-thumb{ border-color:#4b5563; } .avatar-choice input:checked + .avatar-thumb{ border-color:var(--accent); transform:scale(1.03); } .avatar-none .avatar-thumb{ font-size:11px; color:#9ca3af; border-style:dashed; } .avatar-none-label{ padding:0 4px; } /* ====== CARD UTENTI MOBILE ====== */ .user-card-mobile{ padding: 12px 12px 10px; margin-bottom: 8px; } .user-card-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; } .user-card-left{ display:flex; align-items:center; gap:10px; } .user-card-avatar{ width:34px; height:34px; border-radius:50%; background:#111827; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:15px; font-weight:700; color:var(--accent); } .user-card-avatar img{ width:100%; height:100%; object-fit:cover; } .user-card-meta{ display:flex; flex-direction:column; gap:2px; } .user-card-name{ font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px; } .user-role-pill{ font-size:10px; padding:1px 6px; border-radius:999px; background:rgba(255,149,0,0.18); color:#ff9500; border:1px solid rgba(255,149,0,0.4); } .user-card-email{ font-size:12px; color:#9ca3af; word-break:break-all; } .user-card-created{ font-size:11px; color:#6b7280; } .user-card-badges{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 8px; } .badge-date{ font-size:11px; padding:1px 8px; border-radius:999px; background:rgba(148,163,184,0.15); color:#e5e7eb; } .user-card-actions{ display:flex; gap:6px; } /* ============================ BOT CARDS & TERMINAL ============================ */ .bot-list{ display:flex; flex-direction:column; gap:10px; } .bot-card{ background:var(--card); border-radius:10px; border:1px solid var(--line); padding:10px 12px; font-size:13px; } .bot-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; } .bot-card-title{ display:flex; flex-direction:column; gap:2px; } .bot-name{ font-size:14px; font-weight:600; } .bot-sub{ font-size:11px; color:#9ca3af; } .bot-status-pill{ font-size:11px; padding:2px 8px; border-radius:999px; border:1px solid transparent; } .bot-status-running{ background:rgba(34,197,94,0.15); color:#4ade80; border-color:rgba(34,197,94,0.5); } .bot-status-stopped{ background:rgba(239,68,68,0.12); color:#fca5a5; border-color:rgba(239,68,68,0.4); } .bot-status-idle{ background:rgba(148,163,184,0.12); color:#e5e7eb; border-color:rgba(148,163,184,0.4); } .bot-card-body{ margin-top:6px; } .bot-meta-row{ display:flex; justify-content:space-between; font-size:12px; color:#9ca3af; } .bot-meta-row span:first-child{ color:#6b7280; } .bot-card-actions{ margin-top:8px; display:flex; gap:6px; } /* TERMINAL BOX */ .terminal-box{ border-radius:10px; border:1px solid var(--line); background:#020617; overflow:hidden; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; } .terminal-header{ height:24px; display:flex; align-items:center; padding:0 8px; gap:6px; background:#020617; border-bottom:1px solid #111827; } .terminal-header .dot{ width:8px; height:8px; border-radius:999px; display:inline-block; } .terminal-header .dot.red{ background:#f97373; } .terminal-header .dot.yellow{ background:#facc15; } .terminal-header .dot.green{ background:#4ade80; } .terminal-header .term-title{ margin-left:4px; font-size:11px; color:#9ca3af; } .terminal-body{ max-height:320px; padding:6px 10px 8px; overflow:auto; background:#020617; color:#e5e7eb; } .term-line{ white-space:pre-wrap; } .term-line.dim{ color:#6b7280; } .terminal-body::-webkit-scrollbar{ width:5px; } .terminal-body::-webkit-scrollbar-thumb{ background:#111827; border-radius:999px; } /* Mobile tweak */ @media (max-width: 768px){ .bot-card{ padding:10px 10px; } .bot-card-actions{ flex-wrap:wrap; } } .login-remember{ margin: 8px 0 14px; font-size: 13px; display:flex; align-items:center; gap:6px; } .login-remember input[type="checkbox"]{ accent-color: var(--accent); }