@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');
:root { --ink:#17221f; --muted:#69756f; --paper:#f4f0e8; --panel:#fffdf8; --line:#d8d5cb; --lime:#d8f36a; --coral:#f47e63; --teal:#1d6b62; }
[hidden] { display: none !important; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:radial-gradient(circle at 85% 10%, #d9e5c6 0, transparent 28%), var(--paper); font-family:Manrope,sans-serif; }
.shell { max-width:1240px; margin:auto; padding:42px 28px 70px; } .masthead { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:30px; }
.user-management { margin-top:24px; } .user-form { display:grid; grid-template-columns:2fr 2fr 1fr auto; gap:12px; align-items:end; } .user-list { display:grid; gap:8px; margin-top:18px; } .user-row { display:grid; grid-template-columns:2fr 1fr 2fr auto auto; gap:8px; align-items:center; padding:10px; background:#f8f7f1; border:1px solid var(--line); } .user-row button { padding:8px 10px; } @media (max-width:760px) { .user-form, .user-row { grid-template-columns:1fr; } }
.credentials-panel { margin-top:24px; } .credentials-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; } .credentials-form button { padding:10px 12px; } .credentials-form input:disabled { color:#87918d; background:#e9e7df; cursor:not-allowed; } .credentials-saved-banner { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:13px; border:1px solid #9bb84a; background:#f2f8d8; } .credentials-saved-banner>span { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:var(--teal); color:white; font-weight:800; } .credentials-saved-banner strong { color:var(--teal); } .credentials-saved-banner p { margin:3px 0 0; color:var(--muted); font-size:.72rem; } .credentials-form .danger-secondary { color:#a53e2e; background:transparent; border:1px solid #d4aaa2; } @media (max-width:760px) { .credentials-form { grid-template-columns:1fr; } }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:24px; } .login-card { width:min(420px,100%); background:var(--panel); border:1px solid var(--line); padding:30px; box-shadow:8px 8px 0 rgba(29,107,98,.1); } .login-card h1 { font-size:2.5rem; margin:12px 0 24px; } .error { color:#b13e2c; font-size:.8rem; } .account { display:flex; align-items:center; gap:10px; } .logout { background:transparent; border:1px solid var(--line); padding:8px 10px; color:var(--muted); font-size:.72rem; }
.eyebrow,.kicker { color:var(--teal); font:500 12px 'DM Mono',monospace; letter-spacing:0; } h1 { font-size:clamp(2rem,5vw,4.8rem); line-height:.98; max-width:700px; margin:12px 0 0; letter-spacing:0; } h2 { margin:0; font-size:1.5rem; } .status-dot { border:1px solid var(--teal); border-radius:30px; padding:8px 12px; font:500 11px 'DM Mono',monospace; color:var(--teal); }
.workspace { display:grid; grid-template-columns:minmax(300px, .8fr) minmax(420px,1.2fr); gap:22px; margin-top:22px; } .panel { background:rgba(255,253,248,.82); border:1px solid var(--line); padding:25px; box-shadow:6px 6px 0 rgba(29,107,98,.08); } .panel-heading { display:flex; align-items:center; gap:13px; margin-bottom:28px; } .kicker { background:var(--lime); color:var(--ink); padding:5px 7px; }
label { display:block; color:var(--muted); font-size:.77rem; font-weight:700; margin:15px 0; } input,select,textarea { display:block; width:100%; border:1px solid var(--line); background:#fff; color:var(--ink); padding:12px; margin-top:7px; font:400 .9rem 'DM Mono',monospace; border-radius:0; } input:focus,select:focus,textarea:focus { outline:2px solid var(--lime); outline-offset:2px; } textarea { resize:vertical; line-height:1.5; } .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
button { border:0; cursor:pointer; font:800 .85rem Manrope,sans-serif; } .primary { background:var(--ink); color:white; width:100%; padding:15px; margin-top:12px; } .primary:hover { background:var(--teal); } .note { color:var(--muted); font-size:.72rem; line-height:1.5; margin-bottom:0; } .empty-state { color:var(--muted); border:1px dashed var(--line); padding:35px 20px; font:400 .85rem 'DM Mono',monospace; } .task-form-message { display:grid; gap:4px; margin-top:12px; padding:12px; border:1px solid #99b66c; background:#f1f7dd; color:var(--teal); font-size:.76rem; } .task-form-message span { color:var(--muted); line-height:1.45; } .task-form-message button { justify-self:start; margin-top:5px; padding:7px 9px; background:var(--teal); color:white; } .task-form-message.error-message { border-color:#e1a597; background:#fff0ec; color:#a53e2e; }
.task-list { display:grid; gap:14px; } .task { border-left:4px solid var(--teal); background:#f8f7f1; padding:15px; } .task.waiting_login,.task.retrying { border-color:var(--coral); } .task.failed,.task.stopped { border-color:#888; } .task-top { display:flex; justify-content:space-between; gap:10px; font-size:.8rem; font-weight:800; } .task-status { display:flex; align-items:center; gap:7px; } .task-status i,.terminal-bar i { width:7px; height:7px; border-radius:50%; background:#70e28b; box-shadow:0 0 8px #70e28b; } .task.completed .task-status i { background:var(--lime); } .task.failed .task-status i,.task.stopped .task-status i,.task.interrupted .task-status i { background:var(--coral); box-shadow:none; } .task-meta { color:var(--muted); font:400 .7rem 'DM Mono',monospace; margin:6px 0 12px; } .terminal { overflow:hidden; border:1px solid #2b3935; background:#111a18; } .terminal-bar { min-height:37px; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 9px 6px 12px; background:#1c2926; color:#a9bbb5; font:500 .62rem 'DM Mono',monospace; } .terminal-bar>span { display:flex; align-items:center; gap:7px; } .terminal-bar>div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; } .terminal-bar button { padding:5px 7px; border:1px solid #40514c; background:#263632; color:#d6e1dd; font:500 .58rem 'DM Mono',monospace; } .terminal-bar button:hover { border-color:var(--lime); color:var(--lime); } .logs { height:260px; overflow:auto; margin:0; background:#111a18; color:#d8f36a; padding:13px; white-space:pre-wrap; overflow-wrap:anywhere; font:400 .7rem/1.6 'DM Mono',monospace; scrollbar-color:#40514c #111a18; } .task-actions { display:flex; gap:8px; margin-top:10px; } .task-actions button { background:var(--lime); padding:9px 12px; } .task-actions .stop { background:#e4e0d5; }
.monitor-toolbar { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:-12px 0 14px; color:var(--muted); font-size:.72rem; font-weight:700; } .monitor-toolbar label { width:180px; margin:0; } .monitor-toolbar select { padding:8px; margin:0; font-size:.75rem; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .stats { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; } .stats span { border:1px solid var(--line); color:var(--muted); padding:6px 8px; font:400 .65rem 'DM Mono',monospace; text-transform:uppercase; } .stats b { color:var(--ink); font-size:.85rem; }
.analytics-heading { display:flex; align-items:center; gap:13px; margin:26px 0 12px; } .analytics-controls { display:flex; align-items:end; gap:10px; margin-bottom:14px; } .analytics-controls label { flex:1; margin:0; } .analytics-controls input { padding:8px; font-size:.72rem; } .analytics-controls button { background:var(--lime); padding:9px 12px; } .metric-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin-bottom:14px; } .metric-grid span { background:#f8f7f1; border:1px solid var(--line); color:var(--muted); padding:8px; font:400 .62rem 'DM Mono',monospace; text-transform:uppercase; } .metric-grid b { display:block; color:var(--ink); font:800 1.2rem Manrope,sans-serif; } table { width:100%; border-collapse:collapse; font:400 .7rem 'DM Mono',monospace; } th,td { border-bottom:1px solid var(--line); padding:8px 5px; text-align:left; } th { color:var(--muted); font-size:.62rem; text-transform:uppercase; }
.server-load-panel { margin-top:26px; padding-top:1px; border-top:1px solid var(--line); } .server-load-heading { margin-top:20px; } .server-live { margin-left:auto; color:#23854c; font:500 .62rem 'DM Mono',monospace; letter-spacing:.08em; } .server-live.offline { color:#b13e2c; } .server-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .server-metrics>p { grid-column:1/-1; color:var(--muted); font:400 .72rem 'DM Mono',monospace; } .server-metric { padding:10px; border:1px solid var(--line); background:#f8f7f1; } .server-metric>div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .server-metric span,.server-metric small { color:var(--muted); font:400 .59rem 'DM Mono',monospace; text-transform:uppercase; } .server-metric strong { font:800 .82rem Manrope,sans-serif; text-align:right; } .server-metric small { display:block; margin-top:5px; text-transform:none; } .load-bar { height:5px; margin-top:8px; overflow:hidden; background:#e1dfd7; } .load-bar i { display:block; height:100%; min-width:2px; background:var(--teal); transition:width .35s ease; } .server-metric.warning .load-bar i { background:#d69b2d; } .server-metric.critical .load-bar i { background:var(--coral); }
.toast { position:fixed; right:24px; bottom:24px; z-index:1000; max-width:min(360px,calc(100vw - 32px)); padding:13px 17px; border:1px solid #8fae51; background:#17221f; color:#d8f36a; box-shadow:5px 5px 0 rgba(29,107,98,.18); opacity:0; transform:translateY(10px); transition:opacity .2s ease,transform .2s ease; font:500 .76rem 'DM Mono',monospace; } .toast.toast-visible { opacity:1; transform:translateY(0); } .toast.toast-error { border-color:#f47e63; color:#ffd4ca; }
.confirm-modal { position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:20px; background:rgba(17,26,24,.62); opacity:0; transition:opacity .16s ease; } .confirm-modal.confirm-visible { opacity:1; } .confirm-dialog { width:min(430px,100%); padding:26px; border:1px solid var(--line); background:var(--panel); box-shadow:8px 8px 0 rgba(23,34,31,.24); transform:translateY(8px); transition:transform .16s ease; } .confirm-visible .confirm-dialog { transform:translateY(0); } .confirm-icon { display:grid; place-items:center; width:34px; height:34px; margin-bottom:15px; border-radius:50%; background:#fff0ec; color:#b13e2c; font-weight:800; } .confirm-dialog h2 { margin-bottom:8px; } .confirm-dialog p { margin:0; color:var(--muted); font-size:.8rem; line-height:1.55; } .confirm-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; } .confirm-actions button { padding:10px 14px; border:1px solid var(--line); background:#edeae1; } .confirm-actions .confirm-danger { border-color:#b94e3d; background:#b94e3d; color:white; } .integration-status { display:grid; gap:5px; padding:11px; border:1px solid var(--line); background:#f8f7f1; font-size:.7rem; } .integration-status strong { color:var(--ink); } .integration-status span { color:var(--muted); line-height:1.5; } .integration-status.integration-ready { border-color:#9bb84a; background:#f2f8d8; } .integration-status.integration-error { border-color:#d4aaa2; background:#fff0ec; } .integration-status button { padding:2px 4px; color:var(--teal); background:transparent; font:500 .68rem 'DM Mono',monospace; text-decoration:underline; overflow-wrap:anywhere; } .integration-link { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:6px; padding:9px 10px; border:1px solid #b7ca76; background:rgba(255,255,255,.58); color:var(--teal); text-decoration:none; } .integration-link span { color:var(--muted); font:400 .62rem 'DM Mono',monospace; text-transform:uppercase; } .integration-link b { white-space:nowrap; font-size:.7rem; } .integration-link:hover { border-color:var(--teal); background:white; } .field-help { margin:-10px 0 4px; color:var(--muted); font-size:.66rem; line-height:1.45; }
.task-source { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:9px; align-items:center; margin:0 0 12px; padding:9px 11px; border:1px solid #c9d5cf; background:#eef3ee; font:400 .66rem/1.45 'DM Mono',monospace; } .task-source span { color:var(--teal); font-weight:500; text-transform:uppercase; white-space:nowrap; } .task-source a { color:var(--ink); overflow-wrap:anywhere; text-decoration-color:#91a39d; text-underline-offset:2px; } .task-source a:hover { color:var(--teal); } .task-source button { padding:6px 8px; color:white; background:var(--teal); font-size:.62rem; } .task-summary { display:flex; justify-content:flex-end; gap:7px; margin-top:8px; } .task-summary span { padding:6px 8px; border:1px solid var(--line); color:var(--muted); font:400 .62rem 'DM Mono',monospace; text-transform:uppercase; } .task-summary b { color:var(--ink); } .field-hint { display:block; margin-top:5px; color:var(--muted); font:400 .62rem 'DM Mono',monospace; } .hunter-performance { margin-top:18px; padding:14px; border:1px solid #c9d5cf; background:#eef3ee; } .hunter-performance h3 { margin:0 0 10px; font-size:.9rem; } .task-actions .delete { margin-left:auto; color:#a53e2e; background:#fff1ee; border:1px solid #d4aaa2; } .blacklist-panel { margin-top:24px; } .blacklist-actions { display:flex; align-items:center; gap:14px; } .blacklist-actions .primary { width:auto; min-width:190px; } .blacklist-actions .status-dot { margin-top:12px; } code { font-family:'DM Mono',monospace; }
.task-sheet { grid-template-columns:32px minmax(0,1fr) auto; gap:11px; min-height:54px; padding:9px 11px; border-color:#acd2b9; background:linear-gradient(105deg,#edf8f0 0%,#f8fbf5 100%); box-shadow:inset 3px 0 0 #27a765; } .task-sheet .sheet-icon { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; width:30px; height:34px; padding:9px 5px 5px; border-radius:2px; background:#20a464; box-shadow:0 2px 5px rgba(32,164,100,.2); } .task-sheet .sheet-icon i { display:block; border:1px solid rgba(255,255,255,.82); } .task-sheet .sheet-details { display:grid; gap:2px; min-width:0; } .task-sheet .sheet-details small { color:#5e7669; font:500 .57rem 'DM Mono',monospace; letter-spacing:.05em; text-transform:uppercase; } .task-sheet .sheet-details strong { color:#183d2b; font:800 .82rem/1.25 Manrope,sans-serif; overflow-wrap:anywhere; } .task-sheet .sheet-ready { padding:4px 6px; border:1px solid #91c2a4; border-radius:20px; color:#197a49; background:#fff; font:500 .54rem 'DM Mono',monospace; letter-spacing:.06em; }
.task-criteria { display:flex; flex-wrap:wrap; gap:6px; margin:-5px 0 12px; } .task-criteria>span { display:flex; align-items:baseline; gap:6px; min-width:0; padding:6px 8px; border:1px solid #d6d8d0; background:#f7f6f0; } .task-criteria small { color:var(--muted); font:500 .54rem 'DM Mono',monospace; text-transform:uppercase; } .task-criteria b { color:var(--ink); font:800 .68rem Manrope,sans-serif; white-space:nowrap; }
@media (max-width:800px) { .shell { padding:25px 16px 45px; } .masthead { gap:18px; } .workspace { grid-template-columns:1fr; } .monitor-panel { min-height:300px; } } @media (max-width:450px) { .grid-2,.server-metrics { grid-template-columns:1fr; } .status-dot { font-size:9px; } .task-source { grid-template-columns:1fr; } .task-sheet { grid-template-columns:32px minmax(0,1fr); } .task-sheet .sheet-ready { display:none; } }