* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      font-family: Arial, sans-serif;
      background: #1a1a2e;
      color: #eee;
      padding: 20px;
  }

  .login-container {
      max-width: 400px;
      margin: 100px auto;
      background: #16213e;
      padding: 40px;
      border-radius: 10px;
      text-align: center;
  }

  .login-container h1 {
      color: #0f3460;
      margin-bottom: 10px;
      color: #4ecca3;
  }

  .login-container p {
      color: #aaa;
      margin-bottom: 20px;
  }

  .login-container input {
      width: 100%;
      padding: 12px;
      margin-bottom: 15px;
      border: 1px solid #0f3460;
      border-radius: 5px;
      background: #1a1a2e;
      color: #eee;
      font-size: 16px;
  }

  .login-container button {
      width: 100%;
      padding: 12px;
      background: #4ecca3;
      color: #1a1a2e;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      font-weight: bold;
  }

  .error {
      color: #f44336;
      margin-bottom: 15px;
  }

  .container {
      max-width: 1200px;
      margin: 0 auto;
  }

  h1 {
      color: #4ecca3;
      text-align: center;
      margin-bottom: 5px;
  }

  .container > p {
      text-align: center;
      color: #aaa;
      margin-bottom: 30px;
  }

  .goal-section {
      margin-bottom: 30px;
  }

  .goal-section form {
      display: flex;
      gap: 10px;
  }

  .goal-section input {
      flex: 1;
      padding: 12px;
      border: 1px solid #0f3460;
      border-radius: 5px;
      background: #16213e;
      color: #eee;
      font-size: 16px;
  }

  .goal-section button {
      padding: 12px 30px;
      background: #4ecca3;
      color: #1a1a2e;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      font-weight: bold;
  }

  .goal-section button:disabled {
      background: #aaa;
      cursor: not-allowed;
  }

  .agents-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 30px;
  }

  .agent-card {
      background: #16213e;
      border-radius: 10px;
      padding: 20px;
      border: 1px solid #0f3460;
  }

  .task-card {
      grid-column: span 2;
      border-color: #4ecca3;
  }

  .agent-card h2 {
      color: #4ecca3;
      margin-bottom: 10px;
      font-size: 16px;
      text-transform: uppercase;
  }

  .status {
      font-size: 12px;
      color: #aaa;
      margin-bottom: 10px;
      padding: 4px 8px;
      border-radius: 3px;
      display: inline-block;
  }

  .status.working {
      background: #ff9800;
      color: #000;
  }

  .status.done {
      background: #4ecca3;
      color: #000;
  }

  .content {
      font-size: 14px;
      line-height: 1.6;
      white-space: pre-wrap;
      max-height: 300px;
      overflow-y: auto;
      color: #ccc;
  }

  .senior-section {
      background: #16213e;
      border-radius: 10px;
      padding: 20px;
      border: 1px solid #0f3460;
  }

  .senior-section h2 {
      color: #4ecca3;
      margin-bottom: 5px;
  }

  .senior-section > p {
      color: #aaa;
      font-size: 13px;
      margin-bottom: 15px;
  }

  #senior-chat {
      max-height: 300px;
      overflow-y: auto;
      margin-bottom: 15px;
  }

  .message {
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
      line-height: 1.6;
      white-space: pre-wrap;
  }

  .message.user {
      background: #0f3460;
      color: #eee;
  }

  .message.senior {
      background: #1a1a2e;
      border: 1px solid #4ecca3;
      color: #ccc;
  }

  .ask-form {
      display: flex;
      gap: 10px;
  }

  .ask-form input {
      flex: 1;
      padding: 12px;
      border: 1px solid #0f3460;
      border-radius: 5px;
      background: #1a1a2e;
      color: #eee;
      font-size: 14px;
  }

  .ask-form button {
      padding: 12px 20px;
      background: #4ecca3;
      color: #1a1a2e;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: bold;
  }