:root {
  --bg: #0b1220;
  --panel: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.1);
  --text: #e8eefc;
  --text-muted: #94a3b8;
  --primary: #3b82f6;
  --primary-fg: #eff6ff;
  --danger: #ef4444;
  --radius: 12px;
  --font: "Vazirmatn", system-ui, sans-serif;
}
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; }
.wrap { max-width: 768px; margin: 0 auto; padding: 2rem 1rem; }
.sys-error { background: rgba(239, 68, 68, 0.2); border: 1px solid var(--danger); color: #fca5a5; padding: 1rem; border-radius: var(--radius); margin-bottom: 2rem; text-align: center; font-size: 0.9rem; }
.hidden { display: none !important; }

/* Header */
.head { margin-bottom: 2rem; }
h1 { margin: 0; display: flex; align-items: center; gap: 0.75rem; font-size: 1.75rem; }
.version { font-size: 0.75rem; background: var(--primary); color: var(--primary-fg); padding: 2px 8px; border-radius: 99px; }
.subtitle { color: var(--text-muted); margin-top: 0.5rem; font-size: 0.95rem; }
.badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.badge { font-size: 0.75rem; padding: 2px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 99px; color: var(--text-muted); }

/* Forms */
.form-group { margin-bottom: 1.5rem; }
label { display: block; font-weight: 700; margin-bottom: 0.5rem; }
.optional-badge { font-weight: 400; font-size: 0.8rem; color: var(--text-muted); }
.input-wrap { position: relative; }
textarea, input { width: 100%; box-sizing: border-box; background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 1rem; border-radius: var(--radius); font-family: inherit; font-size: 1rem; transition: 0.2s; }
textarea:focus, input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
textarea { min-height: 140px; resize: vertical; }
.icon-btn { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1.2rem; opacity: 0.6; padding: 5px; }
.icon-btn:hover { opacity: 1; }
.hint { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-muted); }

/* Buttons */
.actions { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.action-row { display: flex; gap: 1rem; flex: 1; min-width: 280px; }
.btn { flex: 1; padding: 0.75rem 1.5rem; border-radius: var(--radius); border: none; cursor: pointer; font-weight: 700; font-family: inherit; transition: transform 0.1s, filter 0.2s; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(1); }
.primary { background: var(--primary); color: var(--primary-fg); }
.primary:hover:not(:disabled) { filter: brightness(1.1); }
.warning { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
.warning:hover:not(:disabled) { background: rgba(239, 68, 68, 0.3); }
.secondary { background: var(--panel); border: 1px solid var(--border); color: var(--text); }
.secondary:hover:not(:disabled) { background: rgba(255,255,255,0.1); }
.ghost { background: transparent; border: 1px dashed var(--border); color: var(--text-muted); }
.ghost:hover:not(:disabled) { color: var(--text); border-color: var(--text); }

/* Messages */
.msg { padding: 1rem; border-radius: var(--radius); font-weight: 500; display: none; animation: fadeIn 0.3s ease; }
.msg.show { display: block; }
.success { background: rgba(16, 185, 129, 0.1); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.2); }
.error { background: rgba(239, 68, 68, 0.1); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.2); }
.info { background: rgba(59, 130, 246, 0.1); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.2); }

/* Debug Box */
.debug-box {
    margin-top: 20px;
    padding: 15px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: var(--radius);
    color: #fca5a5;
    font-family: monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    direction: ltr;
    text-align: left;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.foot { text-align: center; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--text-muted); }
@media (max-width: 600px) { .actions { flex-direction: column; } .action-row { width: 100%; } }