@import url('https://fonts.googleapis.com/css2?family=Georgia&display=swap');

  :root {
    --bg: #F7F5F0;
    --card: #FFFFFF;
    --card-muted: #EFECE6;
    --text: #2B2B2B;
    --text-muted: #6E6E6E;
    --border: #E0DDD5;
    --accent-navy: #2C3E70;
    --accent-ochre: #C8862E;
    --pill-bg: #FFFFFF;
    --pill-border: #D1CDC4;
    --input-bg: #FFFFFF;
    --action-bg: #FDF2F2;
    --action-border: #F87171;
  }

  [data-theme="dark"] {
    --bg: #18191B;
    --card: #222428;
    --card-muted: #2A2D32;
    --text: #E5E3DD;
    --text-muted: #9E9B93;
    --border: #383B42;
    --accent-navy: #4A5C8C;
    --accent-ochre: #D4A359;
    --pill-bg: #222428;
    --pill-border: #444850;
    --input-bg: #18191B;
    --action-bg: #321919;
    --action-border: #991B1B;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0 0 40px 0;
    transition: background 0.2s, color 0.2s;
  }

  .top-pattern-bar {
    height: 18px;
    width: 100%;
    margin-bottom: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='18' viewBox='0 0 48 18'%3E%3Crect width='48' height='18' fill='%232C3E70'/%3E%3Cpath d='M0 13 L6 7 L12 13 L18 7 L24 13 L30 7 L36 13 L42 7 L48 13' stroke='%23C8862E' stroke-width='2.4' fill='none'/%3E%3Ccircle cx='6' cy='3' r='1.7' fill='%23B5502F'/%3E%3Ccircle cx='18' cy='3' r='1.7' fill='%23F4F3EE'/%3E%3Ccircle cx='30' cy='3' r='1.7' fill='%23B5502F'/%3E%3Ccircle cx='42' cy='3' r='1.7' fill='%23F4F3EE'/%3E%3Crect x='0' y='16' width='48' height='2' fill='%23B5502F'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 48px 18px;
  }

  .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
  .top-bar { display: flex; justify-content: flex-end; margin-bottom: 16px; min-height: 32px; }
  .layout { display: flex; flex-direction: column; gap: 32px; }
  @media (min-width: 768px) { .layout { flex-direction: row; } }

  h1, h2, h3, .serif-title { font-family: "Georgia", Georgia, serif; font-weight: normal; }

  /* Sidebar */
  .sidebar { flex: 1; display: flex; flex-direction: column; gap: 12px; }
  .sidebar-header { display: flex; justify-content: space-between; align-items: baseline; }
  .sidebar-header h2 { font-size: 1.5rem; margin: 0; }
  .proj-card {
    background: var(--card-muted);
    border: 1px solid var(--border);
    border-left: 6px solid var(--accent-navy);
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .proj-card:hover { background: var(--card); transform: translateX(2px); }
  .proj-card.active { background: var(--card); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

  /* Main Stream */
  .main { flex: 2; display: flex; flex-direction: column; gap: 20px; }
  .header-box { border-bottom: 2px stroke var(--border); padding-bottom: 16px; }
  .header-box h1 { font-size: 2.4rem; margin: 0 0 8px 0; color: var(--text); }
  .header-box p { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 16px 0; }

  /* Filter Pills & Contacts */
  .filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
  .filter-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
  .pill-btn {
    background: var(--pill-bg);
    border: 1px solid var(--pill-border);
    color: var(--text);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.85rem;
    cursor: pointer;
  }
  .pill-btn.active { background: var(--accent-navy); color: #FFFFFF; border-color: var(--accent-navy); }
  .add-contact-pill {
    background: transparent;
    border: 1px dashed var(--pill-border);
    color: var(--accent-ochre);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.85rem;
    cursor: pointer;
  }

  .proj-tag { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; color: #FFFFFF; margin-bottom: 6px; }
  .dotted-divider { border: 0; border-top: 2px dotted var(--accent-ochre); margin: 24px 0 16px 0; }
  .stream-header { display: flex; justify-content: space-between; align-items: center; }

  /* Log Cards */
  .log-item {
    background: var(--card-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    gap: 16px;
  }
  .log-item.action-required { background: var(--action-bg); border-color: var(--action-border); }
  .log-time-col { min-width: 90px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); border-right: 1px solid var(--border); padding-right: 12px; }
  .log-body { flex: 1; }
  .log-actions { font-size: 0.78rem; color: var(--text-muted); float: right; }
  .log-actions a { color: var(--text-muted); text-decoration: underline; margin-left: 8px; cursor: pointer; }
  .log-actions a.danger { color: #ef4444; }
  .log-details {
    white-space: pre-wrap;
    word-break: break-word; /* Prevents long URLs from overflowing container bounds */
  }

  /* Buttons & Modals */
  .btn { background: var(--accent-navy); color: #FFFFFF; border: none; padding: 8px 18px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
  .btn-sm { padding: 5px 12px; font-size: 0.82rem; }
  .btn-outline { background: var(--pill-bg); color: var(--text); border: 1px solid var(--pill-border); }
  .btn-icon { background: var(--pill-bg); border: 1px solid var(--pill-border); color: var(--text); padding: 6px 14px; border-radius: 20px; cursor: pointer; }

  .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); align-items: center; justify-content: center; z-index: 100; }
  .modal-content { background: var(--card); border: 1px solid var(--border); padding: 24px; border-radius: 12px; width: 90%; max-width: 500px; display: flex; flex-direction: column; gap: 12px; max-height: 90vh; overflow-y: auto; }
  textarea, input, select { width: 100%; padding: 10px; background: var(--input-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; font-family: inherit; }
  .contact-input-group { display: flex; gap: 6px; margin-bottom: 6px; }