@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#0F1115; --surface:#171B23; --surface-alt:#1E232D; --border:#2A303C;
  --text:#E6E9EF; --muted:#8B93A3; --cyan:#5EEAD4; --amber:#FBBF24;
  --green:#34D399; --violet:#A78BFA; --red:#F87171;
}
*{box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;margin:0;min-height:100vh;}

.df-header{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;border-bottom:1px solid var(--border);}
.df-wordmark{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:19px;letter-spacing:0.5px;color:var(--text);}
.df-wordmark span{color:var(--cyan);}
.df-header-right{display:flex;align-items:center;gap:10px;}
.df-user-chip{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);}
.df-status{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;}
.df-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);}
.df-dot.on{background:var(--green);box-shadow:0 0 8px var(--green);}
.df-dot.busy{background:var(--amber);box-shadow:0 0 8px var(--amber);animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}

.df-body{padding:20px 28px;display:flex;flex-direction:column;gap:20px;max-width:1200px;margin:0 auto;}
.df-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:820px){ .df-row{grid-template-columns:1fr;} }
.df-panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px;}
.df-label{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:10px;display:block;}
.df-hint{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5;}
.df-empty{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:12.5px;padding:30px 0;text-align:center;}
.df-link{color:var(--cyan);text-decoration:none;}
.df-link:hover{text-decoration:underline;}

textarea#df-notes{width:100%;height:220px;background:var(--surface-alt);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:12px;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.5;resize:vertical;}
textarea#df-notes:focus{outline:2px solid var(--cyan);outline-offset:1px;}
textarea#df-notes::placeholder{color:#5B6270;}

.df-dropzone{border:1.5px dashed var(--border);border-radius:8px;padding:18px;text-align:center;cursor:pointer;background:var(--surface-alt);transition:border-color 0.15s;}
.df-dropzone:hover,.df-dropzone.drag{border-color:var(--cyan);}
.df-dz-title{font-size:13px;font-weight:600;margin-bottom:4px;}
.df-dz-sub{font-size:11.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;}

.df-profile-card{margin-top:12px;background:var(--surface-alt);border:1px solid var(--border);border-radius:8px;padding:12px;font-size:12px;}
.df-profile-row{display:flex;gap:8px;margin:4px 0;}
.df-profile-row .k{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:11px;min-width:110px;flex-shrink:0;}
.df-profile-row .v{color:var(--text);word-break:break-word;}
.df-logo-preview{max-height:46px;max-width:140px;border-radius:4px;background:#fff;padding:4px;}
.df-swatches{display:flex;gap:5px;}
.df-swatch{width:16px;height:16px;border-radius:3px;border:1px solid rgba(255,255,255,0.2);}

.df-chips{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px;}
@media (max-width:900px){ .df-chips{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .df-chips{grid-template-columns:1fr;} }
.df-chip{display:flex;align-items:center;gap:10px;background:var(--surface-alt);border:1px solid var(--border);border-radius:8px;padding:11px 12px;cursor:pointer;user-select:none;}
.df-chip:hover{border-color:#3A4150;}
.df-chip.active{border-color:var(--chip-color,var(--cyan));background:rgba(255,255,255,0.03);}
.df-chip input{accent-color:var(--chip-color,var(--cyan));width:15px;height:15px;flex-shrink:0;}
.df-chip-label{font-size:13px;font-weight:500;}
.df-chip-sub{font-size:11px;color:var(--muted);display:block;}

.df-name-row{display:flex;gap:10px;}
.df-name-row input{flex:1;background:var(--surface-alt);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 12px;font-family:'Inter',sans-serif;font-size:13px;}
.df-name-row input:focus{outline:2px solid var(--cyan);outline-offset:1px;}

.df-btn{width:100%;background:var(--cyan);color:#0B1310;border:none;border-radius:8px;padding:13px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;letter-spacing:0.3px;cursor:pointer;}
.df-btn:hover{filter:brightness(1.08);}
.df-btn:disabled{background:#3A4150;color:var(--muted);cursor:not-allowed;}

.df-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;border-bottom:1px solid var(--border);padding-bottom:12px;}
.df-tab{font-family:'JetBrains Mono',monospace;font-size:11.5px;padding:7px 11px;border-radius:6px;background:var(--surface-alt);color:var(--muted);cursor:pointer;border:1px solid transparent;}
.df-tab.active{color:var(--text);border-color:var(--tab-color,var(--cyan));background:rgba(255,255,255,0.04);}
.df-tab .df-tab-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tab-color,var(--cyan));margin-right:6px;}

#df-output{max-height:520px;overflow-y:auto;font-size:13.5px;line-height:1.65;}
#df-output-inner img.df-out-logo{max-height:52px;margin-bottom:14px;background:#fff;padding:4px;border-radius:4px;}
#df-output h1,#df-output h2,#df-output h3{font-family:'JetBrains Mono',monospace;color:var(--doc-accent,var(--cyan));margin-top:18px;margin-bottom:8px;}
#df-output h1{font-size:18px;} #df-output h2{font-size:15px;} #df-output h3{font-size:13px;color:var(--violet);}
#df-output p{margin:8px 0;color:#D5D9E0;}
#df-output ul,#df-output ol{padding-left:20px;margin:8px 0;color:#D5D9E0;}
#df-output code{background:var(--surface-alt);padding:1px 5px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:12px;}
#df-output table{border-collapse:collapse;width:100%;margin:10px 0;font-size:12.5px;}
#df-output th,#df-output td{border:1px solid var(--border);padding:6px 8px;text-align:left;}
#df-output th{background:var(--surface-alt);color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;}

.df-out-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;flex-wrap:wrap;}
.df-icon-btn{background:var(--surface-alt);border:1px solid var(--border);color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:11px;padding:6px 10px;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;}
.df-icon-btn:hover{color:var(--text);border-color:#3A4150;}

.df-log{background:#0A0C10;border:1px solid var(--border);border-radius:10px;padding:14px 18px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#6EE7B7;max-height:120px;overflow-y:auto;}
.df-log div{margin:2px 0;color:var(--muted);}
.df-log div.ok{color:var(--green);}
.df-log div.err{color:var(--red);}

.df-table{width:100%;border-collapse:collapse;font-size:13px;}
.df-table th,.df-table td{border-bottom:1px solid var(--border);padding:9px 10px;text-align:left;}
.df-table th{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;color:var(--muted);}

.df-admin-form{display:flex;gap:10px;flex-wrap:wrap;}
.df-admin-form input,.df-admin-form select{background:var(--surface-alt);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 12px;font-family:'Inter',sans-serif;font-size:13px;}

.df-auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;}
.df-auth-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:32px;width:360px;}
.df-auth-sub{color:var(--muted);font-size:12.5px;margin:8px 0 20px;}
.df-auth-error{background:rgba(248,113,113,0.1);border:1px solid var(--red);color:var(--red);padding:9px 12px;border-radius:6px;font-size:12.5px;margin-bottom:14px;}
.df-auth-form{display:flex;flex-direction:column;gap:14px;}
.df-auth-form label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:6px;}
.df-auth-form input{background:var(--surface-alt);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 12px;font-family:'Inter',sans-serif;font-size:13px;}