/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* frontend/app/globals.css */
:root {
    --x-blue: #1D9BF0;
    --dark-bg: #000000;
    --dark-text: #E7E9EA;
    --dark-text-secondary: #71767B;
    --dark-border: #2F3336;
    --dark-card-bg: #16181C;
  }
  
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--dark-bg);
    color: var(--dark-text);
  }
  
  * {
    box-sizing: border-box;
  }
  
  /* --- NEW: Main Two-Column Layout --- */
  .container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
    display: grid;
    /* This creates a 400px column on the left and lets the right column take the rest of the space */
    grid-template-columns: 400px 1fr; 
    grid-gap: 2rem; 
    gap: 2rem; /* The space between the columns */
  }
  
  /* --- Header --- */
  .main-header {
    grid-column: 1 / -1; /* Make the header span across both columns */
    text-align: center;
    margin-bottom: 1rem;
    color: var(--x-blue);
    font-size: 2.5rem;
  }
  
  /* --- Panels and Forms --- */
  .panel {
    background-color: var(--dark-card-bg);
    border: 1px solid var(--dark-border);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .panel h2, .panel h3 {
    margin-top: 0;
    border-bottom: 1px solid var(--dark-border);
    padding-bottom: 0.5rem;
  }
  
  .form-group {
    margin-bottom: 1.5rem;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--dark-text-secondary);
    font-size: 0.9rem;
  }
  
  input[type="text"],
  input[type="password"],
  textarea {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--dark-bg);
    border: 1px solid var(--dark-border);
    border-radius: 4px;
    color: var(--dark-text);
    font-size: 1rem;
  }
  
  textarea {
    min-height: 120px;
    resize: vertical;
  }
  
  /* --- Buttons --- */
  .button {
    display: inline-block;
    background-color: var(--x-blue);
    color: #0F1419;
    font-weight: bold;
    font-size: 1rem;
    border: none;
    border-radius: 9999px;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
  }
  .button:hover {
    background-color: #1A8CD8;
  }
  .button:disabled {
      opacity: 0.7;
      cursor: not-allowed;
  }
  .button-full-width {
      width: 100%;
  }
  .button-small {
      font-size: 0.8em;
      padding: 0.25rem 0.5rem;
  }
  .button-danger {
      background-color: #555;
  }
  
  /* --- Tweet Feed --- */
  .tweet-feed {
    margin-top: 1rem;
  }
  .tweet {
      border-bottom: 1px solid var(--dark-border);
      padding: 1rem 0;
  }
  .tweet:last-child {
    border-bottom: none;
  }
  .tweet p {
      margin: 0.5rem 0;
      white-space: pre-wrap;
      word-break: break-word;
  }
  .tweet-header strong {
    color: var(--dark-text);
  }
  .tweet-header .timestamp {
    font-size: 0.85em;
    color: var(--dark-text-secondary);
    margin-left: 0.5rem;
  }
  .tweet-media {
      margin-top: 0.5rem;
  }
  .tweet-media ul {
      list-style: none;
      padding: 0;
      margin: 0.5rem 0 0 0;
  }
  .tweet-media a {
      color: var(--x-blue);
      word-break: break-all;
  }