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

:root {
      --bg: #070708;
      --surface: #141418;
      --surface-hover: #1B1B21;
      --primary: #4DD438;
      --primary-hover: #62E64D;
      --secondary: #971AFB;
      --secondary-hover: #AB3BFF;
      --text: #F5F5F7;
      --text-muted: #A9A9B2;
      --danger: #FF4D5A;
      --surface-subtle: #1B1B21;
      --fg: var(--text);
      --muted: var(--text-muted);
      --border: #303039;
      --accent: var(--primary);
      --accent-hover: var(--primary-hover);
      --accent-subtle: rgba(77, 212, 56, 0.14);
      --secondary-subtle: rgba(151, 26, 251, 0.16);
      --red-if: var(--danger);
      --red-subtle: rgba(255, 77, 90, 0.14);
      --amber: #AB3BFF;
      --amber-subtle: rgba(171, 59, 255, 0.14);
      --blue: #971AFB;
      --blue-subtle: rgba(151, 26, 251, 0.16);
      --purple: #AB3BFF;
      --purple-subtle: rgba(171, 59, 255, 0.14);

      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-full: 9999px;

      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
      --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32);
      --shadow-lg: 0 22px 55px rgba(0, 0, 0, 0.46);
    }

    html[data-theme="light"] {
      --bg: #FFFFFF;
      --surface: #FFFFFF;
      --surface-hover: #F5F5F7;
      --surface-subtle: #F3F4F6;
      --fg: #141418;
      --muted: #62626C;
      --border: #DADAE1;
      --accent-subtle: rgba(77, 212, 56, 0.13);
      --secondary-subtle: rgba(151, 26, 251, 0.1);
      --red-subtle: rgba(255, 77, 90, 0.1);
      --amber-subtle: rgba(171, 59, 255, 0.1);
      --blue-subtle: rgba(151, 26, 251, 0.1);
      --purple-subtle: rgba(171, 59, 255, 0.1);
      --shadow-sm: 0 1px 3px rgba(20, 20, 24, 0.08);
      --shadow-md: 0 8px 24px rgba(20, 20, 24, 0.1);
      --shadow-lg: 0 22px 55px rgba(20, 20, 24, 0.16);
      color-scheme: light;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background-color: var(--bg);
      color: var(--fg);
      font-family: var(--font-sans);
      line-height: 1.5;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 24px 16px 80px 16px;
    }

    /* Container Principal */
    .app-viewport {
      width: 100%;
      max-width: 440px; /* Modo mobile por padrão */
      background: var(--bg);
      border-radius: 32px;
      border: 1px solid var(--border);
      box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 840px;
      position: relative;
      transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Header Superior */
    .app-header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 12px 16px;
      position: sticky;
      top: 0;
      z-index: 40;
    }

    .header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .logo-container {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
    }

    /* Logotipo IF Rodeado de Átomos */
    .atom-logo-svg {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      filter: drop-shadow(0 2px 4px rgba(0, 130, 48, 0.15));
    }

    .brand-meta {
      display: flex;
      flex-direction: column;
    }

    .brand-title {
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--fg);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .brand-badge {
      font-size: 0.65rem;
      font-family: var(--font-mono);
      background: var(--accent-subtle);
      color: var(--accent);
      padding: 2px 6px;
      border-radius: var(--radius-sm);
      font-weight: 700;
    }

    .brand-campus {
      font-size: 0.72rem;
      color: var(--muted);
      font-weight: 500;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .theme-toggle { flex: 0 0 auto; }
    .theme-toggle .theme-icon { width: 19px; height: 19px; }
    .theme-icon-moon { display: none; }
    html[data-theme="light"] .theme-icon-sun { display: none; }
    html[data-theme="light"] .theme-icon-moon { display: block; }

    .icon-action-btn {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-full);
      border: 1px solid var(--border);
      background: var(--surface);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--fg);
      cursor: pointer;
      position: relative;
      transition: all 0.15s ease;
    }

    .icon-action-btn:hover {
      background: var(--surface-subtle);
      border-color: var(--secondary);
    }

    .badge-dot {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 8px;
      height: 8px;
      background: var(--red-if);
      border: 2px solid var(--surface);
      border-radius: var(--radius-full);
    }

    /* Barra de Navegação Desktop (visível apenas em Desktop) */
    .desktop-nav-bar {
      display: none;
      border-top: 1px solid var(--border);
      margin-top: 10px;
      padding-top: 8px;
      overflow-x: auto;
    }

    .desktop-tab-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: var(--radius-md);
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--muted);
      border: none;
      background: transparent;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s;
    }

    .desktop-tab-btn:hover {
      color: var(--fg);
      background: var(--surface-subtle);
    }

    .desktop-tab-btn.active {
      color: var(--accent);
      background: var(--accent-subtle);
    }

    .desktop-tab-btn.publish-pill {
      background: var(--accent);
      color: var(--bg);
    }

    .desktop-tab-btn.publish-pill:hover {
      background: var(--accent-hover);
      color: var(--bg);
    }

    /* Navegação Inferior Mobile (7 ABAS EXATAS) */
    .mobile-bottom-nav {
      position: sticky;
      bottom: 0;
      width: 100%;
      background: rgba(20, 20, 24, 0.96);
      backdrop-filter: blur(12px);
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 6px 4px calc(env(safe-area-inset-bottom, 8px) + 4px) 4px;
      z-index: 50;
    }

    html[data-theme="light"] .mobile-bottom-nav { background: rgba(255, 255, 255, 0.96); }

    .nav-tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      padding: 6px 4px;
      border-radius: var(--radius-sm);
      min-width: 44px;
      flex: 1;
      text-decoration: none;
      transition: color 0.15s ease;
    }

    .nav-tab-item svg {
      width: 20px;
      height: 20px;
      stroke-width: 1.8;
      transition: transform 0.15s ease;
    }

    .nav-tab-item span {
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1;
    }

    .nav-tab-item.active {
      color: var(--accent);
    }

    .nav-tab-item.active svg {
      transform: translateY(-1px);
    }

    /* Aba Publicar em destaque */
    .nav-tab-item.nav-publish {
      color: var(--fg);
    }

    .nav-publish-icon-wrap {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-full);
      background: var(--accent);
      color: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(77, 212, 56, 0.28);
      transition: transform 0.15s;
    }

    .nav-tab-item.active .nav-publish-icon-wrap {
      background: var(--accent-hover);
      transform: scale(1.05);
    }

    .nav-publish-icon-wrap svg {
      width: 18px;
      height: 18px;
      stroke-width: 2.2;
    }

    /* Conteúdo Principal */
    .tab-view-content {
      flex: 1;
      display: none;
      padding: 16px;
      animation: fadeIn 0.2s ease;
    }

    .tab-view-content.active-panel {
      display: block;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Utilidades e Componentes Reutilizáveis */
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .section-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--fg);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .section-action-link {
      font-size: 0.78rem;
      color: var(--accent);
      text-decoration: none;
      font-weight: 600;
      cursor: pointer;
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 14px;
      margin-bottom: 12px;
      box-shadow: var(--shadow-sm);
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .card:hover {
      border-color: var(--secondary);
      box-shadow: var(--shadow-md);
    }

    /* Badges */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.72rem;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: var(--radius-full);
      line-height: 1;
      letter-spacing: -0.01em;
    }

    .badge-live {
      background: var(--red-subtle);
      color: var(--red-if);
    }

    .badge-live-dot {
      width: 6px;
      height: 6px;
      border-radius: var(--radius-full);
      background: var(--red-if);
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0% { transform: scale(0.95); opacity: 1; }
      50% { transform: scale(1.3); opacity: 0.5; }
      100% { transform: scale(0.95); opacity: 1; }
    }

    .badge-food {
      background: var(--accent-subtle);
      color: var(--accent);
    }

    .badge-jobs {
      background: var(--blue-subtle);
      color: var(--blue);
    }

    .badge-sales {
      background: var(--secondary-subtle);
      color: var(--secondary-hover);
    }

    .badge-events {
      background: var(--purple-subtle);
      color: var(--purple);
    }

    .badge-amber {
      background: var(--amber-subtle);
      color: var(--amber);
    }

    /* Pílulas de Filtro Rápido */
    .filter-pills-row {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 6px;
      margin-bottom: 14px;
      scrollbar-width: none;
    }

    .filter-pills-row::-webkit-scrollbar {
      display: none;
    }

    .filter-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: var(--radius-full);
      font-size: 0.8rem;
      font-weight: 600;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--muted);
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s;
    }

    .filter-pill.active {
      background: var(--accent);
      color: var(--bg);
      border-color: var(--accent);
    }

    .filter-pill svg {
      width: 14px;
      height: 14px;
    }

    /* ==============================================================
       1. ABA: HOJE
       ============================================================== */
    .hoje-greeting-box {
      background: var(--surface);
      color: var(--fg);
      border: 1px solid var(--border);
      border-left: 4px solid var(--secondary);
      border-radius: var(--radius-md);
      padding: 16px;
      margin-bottom: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: var(--shadow-sm);
    }

    .greeting-text h2 {
      font-size: 1.15rem;
      font-weight: 800;
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .greeting-text p {
      font-size: 0.78rem;
      opacity: 0.9;
    }

    .greeting-campus-pill {
      background: rgba(255, 255, 255, 0.18);
      padding: 6px 10px;
      border-radius: var(--radius-sm);
      font-size: 0.72rem;
      font-family: var(--font-mono);
      font-weight: 600;
      text-align: right;
    }

    /* Horizontal Scroller: Acontecendo Agora */
    .live-rail {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 6px;
      margin-bottom: 16px;
      scrollbar-width: none;
    }

    .live-rail::-webkit-scrollbar {
      display: none;
    }

    .live-card {
      min-width: 250px;
      max-width: 260px;
      flex-shrink: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 12px;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .live-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .live-card-title {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--fg);
      line-height: 1.3;
      margin-bottom: 6px;
    }

    .live-card-meta {
      font-size: 0.74rem;
      color: var(--muted);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .meta-line {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .meta-line svg {
      width: 14px;
      height: 14px;
      stroke-width: 2;
      flex-shrink: 0;
    }

    /* Bandejão Resumo */
    .ru-mini-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 4px solid var(--accent);
      border-radius: var(--radius-md);
      padding: 14px;
      margin-bottom: 16px;
    }

    .ru-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .ru-status-meter {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--surface-subtle);
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      margin: 10px 0;
    }

    .ru-meter-bar {
      flex: 1;
      height: 6px;
      background: var(--border);
      border-radius: var(--radius-full);
      overflow: hidden;
      position: relative;
    }

    .ru-meter-fill {
      height: 100%;
      width: 45%;
      background: var(--secondary); /* Moderada */
      border-radius: var(--radius-full);
      transition: width 0.3s;
    }

    /* Timeline Hoje */
    .timeline-item {
      display: flex;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }

    .timeline-item:last-child {
      border-bottom: none;
    }

    .time-slot {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--accent);
      width: 48px;
      flex-shrink: 0;
    }

    .timeline-info h4 {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--fg);
      margin-bottom: 2px;
    }

    .timeline-info p {
      font-size: 0.75rem;
      color: var(--muted);
    }

    /* ==============================================================
       2. ABA: FEED
       ============================================================== */
    .feed-composer-trigger {
      display: flex;
      width: 100%;
      align-items: center;
      gap: 10px;
      background: var(--surface);
      border: 1px dashed var(--border);
      border-radius: var(--radius-md);
      padding: 10px 14px;
      margin-bottom: 14px;
      cursor: pointer;
      color: var(--muted);
      font: inherit;
      text-align: left;
      transition: border-color 0.15s;
    }

    .feed-composer-trigger:hover {
      border-color: var(--accent);
    }

    .avatar-sm {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-full);
      background: var(--surface-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.78rem;
      color: var(--accent);
      flex-shrink: 0;
    }

    .post-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 14px;
      margin-bottom: 12px;
      box-shadow: var(--shadow-sm);
    }

    .post-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .post-author-box {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .author-name {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--fg);
      line-height: 1.2;
    }

    .author-course {
      font-size: 0.72rem;
      color: var(--muted);
    }

    .post-text {
      font-size: 0.86rem;
      color: var(--fg);
      margin-bottom: 10px;
      line-height: 1.45;
    }

    .post-meta-tags {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .expiration-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.7rem;
      font-family: var(--font-mono);
      background: var(--surface-subtle);
      color: var(--muted);
      padding: 2px 7px;
      border-radius: var(--radius-sm);
    }

    .post-footer-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--border);
      padding-top: 8px;
      margin-top: 6px;
    }

    .action-subgroup {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .post-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: none;
      border: none;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s;
    }

    .post-action-btn:hover, .post-action-btn.active {
      color: var(--accent);
    }

    .post-action-btn svg {
      width: 17px;
      height: 17px;
    }

    /* ==============================================================
       3. ABA: VAGAS
       ============================================================== */
    .job-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 14px;
      margin-bottom: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .job-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }

    .job-title {
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--fg);
      line-height: 1.3;
    }

    .job-company {
      font-size: 0.78rem;
      color: var(--muted);
      font-weight: 600;
    }

    .job-tags-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .job-info-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      background: var(--surface-subtle);
      padding: 10px;
      border-radius: var(--radius-sm);
      font-size: 0.76rem;
    }

    .job-grid-cell label {
      display: block;
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    .job-grid-cell span {
      font-weight: 700;
      color: var(--fg);
      font-family: var(--font-mono);
    }

    /* ==============================================================
       4. ABA: PUBLICAR
       ============================================================== */
    .publish-container {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 18px;
    }

    .publish-step-title {
      font-size: 1.05rem;
      font-weight: 800;
      margin-bottom: 4px;
      color: var(--fg);
    }

    .publish-step-desc {
      font-size: 0.8rem;
      color: var(--muted);
      margin-bottom: 16px;
    }

    .category-selection-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-bottom: 18px;
    }

    .cat-select-btn {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--surface);
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: left;
    }

    .cat-select-btn:hover {
      border-color: var(--accent);
      background: var(--surface-subtle);
    }

    .cat-select-btn.selected {
      border-color: var(--accent);
      background: var(--accent-subtle);
    }

    .cat-select-btn svg {
      width: 22px;
      height: 22px;
      margin-bottom: 6px;
      color: var(--accent);
    }

    .cat-name {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--fg);
    }

    .cat-sub {
      font-size: 0.7rem;
      color: var(--muted);
    }

    .form-group {
      margin-bottom: 14px;
    }

    .form-label {
      display: block;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--fg);
      margin-bottom: 6px;
    }

    .form-input, .form-textarea, .form-select {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-family: inherit;
      font-size: 0.85rem;
      color: var(--fg);
      background: var(--surface);
      outline: none;
      transition: border-color 0.15s;
    }

    .form-input:focus, .form-textarea:focus, .form-select:focus {
      border-color: var(--accent);
    }

    .form-textarea {
      resize: vertical;
      min-height: 80px;
    }

    .expiration-radios {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .radio-pill-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-full);
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      user-select: none;
    }

    .radio-pill-label input {
      display: none;
    }

    .radio-pill-label.active {
      border-color: var(--accent);
      background: var(--accent-subtle);
      color: var(--accent);
    }

    .btn-submit-publish {
      width: 100%;
      background: var(--accent);
      color: var(--bg);
      border: none;
      border-radius: var(--radius-md);
      padding: 12px;
      font-size: 0.92rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 4px 10px rgba(0, 130, 48, 0.25);
      transition: background 0.15s;
    }

    .btn-submit-publish:hover {
      background: var(--accent-hover);
    }

    /* ==============================================================
       5. ABA: COMIDAS (Bandejão & Lanches)
       ============================================================== */
    .meal-tab-toggle {
      display: flex;
      background: var(--surface-subtle);
      padding: 4px;
      border-radius: var(--radius-md);
      margin-bottom: 14px;
    }

    .meal-tab-btn {
      flex: 1;
      padding: 8px;
      border: none;
      background: transparent;
      border-radius: var(--radius-sm);
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.15s;
    }

    .meal-tab-btn.active {
      background: var(--surface);
      color: var(--fg);
      box-shadow: var(--shadow-sm);
    }

    .ru-full-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 16px;
      margin-bottom: 16px;
    }

    .ru-queue-vote-box {
      background: var(--surface-subtle);
      border-radius: var(--radius-md);
      padding: 12px;
      margin: 14px 0;
      text-align: center;
    }

    .queue-vote-title {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--muted);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .queue-vote-buttons {
      display: flex;
      gap: 8px;
      justify-content: center;
    }

    .queue-vote-btn {
      flex: 1;
      padding: 6px 10px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface);
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--fg);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.15s;
    }

    .queue-vote-btn:hover {
      border-color: var(--accent);
    }

    .queue-vote-btn.selected {
      background: var(--accent-subtle);
      border-color: var(--accent);
      color: var(--accent);
    }

    .menu-item-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 8px 0;
      border-bottom: 1px dashed var(--border);
      font-size: 0.84rem;
    }

    .menu-item-row:last-child {
      border-bottom: none;
    }

    .menu-item-name {
      color: var(--muted);
      font-weight: 500;
    }

    .menu-item-val {
      color: var(--fg);
      font-weight: 700;
      text-align: right;
    }

    /* ==============================================================
       6. ABA: VENDAS (Marketplace Comunitário)
       ============================================================== */
    .market-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 12px;
    }

    .market-item-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-sm);
    }

    .market-item-thumb {
      height: 110px;
      background: var(--surface-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      position: relative;
    }

    .market-price-tag {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background: rgba(7, 7, 8, 0.9);
      color: var(--fg);
      padding: 3px 7px;
      border-radius: var(--radius-sm);
      font-size: 0.75rem;
      font-weight: 700;
      font-family: var(--font-mono);
    }

    .market-item-body {
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
    }

    .market-item-title {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--fg);
      line-height: 1.25;
    }

    .market-item-seller {
      font-size: 0.72rem;
      color: var(--muted);
    }

    .market-btn-contact {
      margin-top: 8px;
      width: 100%;
      padding: 6px;
      border: 1px solid var(--border);
      background: var(--surface-subtle);
      border-radius: var(--radius-sm);
      font-size: 0.74rem;
      font-weight: 700;
      color: var(--fg);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .market-btn-contact:hover {
      background: var(--accent);
      color: var(--bg);
      border-color: var(--accent);
    }

    /* ==============================================================
       7. ABA: PERFIL (Estudante IFSP)
       ============================================================== */
    .profile-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 18px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .profile-avatar-big {
      width: 60px;
      height: 60px;
      border-radius: var(--radius-full);
      background: var(--accent-subtle);
      border: 2px solid var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--accent);
      flex-shrink: 0;
    }

    .profile-details h3 {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--fg);
      line-height: 1.2;
    }

    .profile-details p {
      font-size: 0.78rem;
      color: var(--muted);
      margin-top: 2px;
    }

    .profile-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 16px;
    }

    .profile-stat-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 12px;
      text-align: center;
    }

    .profile-stat-number {
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--accent);
      font-family: var(--font-mono);
    }

    .profile-stat-label {
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      margin-top: 2px;
    }

    .profile-action-list {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
    }

    .profile-action-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
      text-decoration: none;
      color: var(--fg);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
    }

    .profile-action-row:last-child {
      border-bottom: none;
    }

    .profile-action-row:hover {
      background: var(--surface-subtle);
    }

    .profile-action-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .profile-action-left svg {
      width: 18px;
      height: 18px;
      color: var(--muted);
    }

    /* Feedback Toast */
    .toast-notification {
      position: absolute;
      top: 60px;
      left: 50%;
      transform: translateX(-50%) translateY(-20px);
      background: var(--secondary);
      color: var(--fg);
      padding: 10px 18px;
      border-radius: var(--radius-full);
      font-size: 0.8rem;
      font-weight: 600;
      box-shadow: var(--shadow-lg);
      display: flex;
      align-items: center;
      gap: 8px;
      opacity: 0;
      pointer-events: none;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 100;
    }

    .toast-notification.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }


/* Integração do design Elétron com o frontend dinâmico */
:root {
  --ink: var(--fg);
  --ink-soft: var(--muted);
  --ink-faint: var(--muted);
  --line: var(--border);
  --green: var(--accent);
  --green-dark: var(--accent-hover);
  --green-bright: var(--accent-hover);
  --red: var(--red-if);
  --red-soft: var(--red-subtle);
  --surface-muted: var(--surface-subtle);
  --surface-green: var(--accent-subtle);
}
html { scroll-behavior: smooth; color-scheme: dark; background: var(--bg); }
body { min-width: 320px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img { display: block; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 200; left: 16px; top: -80px; padding: 8px 12px; background: var(--accent); color: var(--bg); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.desktop-tab-btn img, .nav-tab-item img, .icon-action-btn img { width: 18px; height: 18px; }
.app-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#app-content { min-height: 100%; }
.tab-view-content:not([hidden]) { display: block; }
.desktop-tab-btn { text-decoration: none; }
.desktop-tab-btn img, .nav-tab-item img, .icon-action-btn img, .card-meta img, .post-location img, .interaction-button img { filter: brightness(0) invert(.82); }
.desktop-tab-btn.active img, .nav-tab-item.active img { filter: brightness(0) saturate(100%) invert(77%) sepia(47%) saturate(706%) hue-rotate(62deg) brightness(99%) contrast(95%); }
.desktop-tab-btn.publish-pill img, .primary-button img, .nav-publish-icon-wrap img { filter: brightness(0); }
html[data-theme="light"] .desktop-tab-btn img, html[data-theme="light"] .nav-tab-item img, html[data-theme="light"] .icon-action-btn img, html[data-theme="light"] .card-meta img, html[data-theme="light"] .post-location img, html[data-theme="light"] .interaction-button img { filter: brightness(0); }
html[data-theme="light"] .desktop-tab-btn.active img, html[data-theme="light"] .nav-tab-item.active img { filter: brightness(0) saturate(100%) invert(62%) sepia(77%) saturate(462%) hue-rotate(63deg) brightness(97%) contrast(94%); }
.brand-symbol { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(151,26,251,.24)); }
.brand-title small { color: var(--accent); background: var(--accent-subtle); padding: 2px 6px; border-radius: 7px; font-family: var(--font-mono); font-size: .65rem; }
.header-account { display: none; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; }
.header-account > span:last-child { display: grid; }
.header-account strong { font-size: .78rem; }
.header-account small { color: var(--muted); font-size: .67rem; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--bg); font-size: .72rem; font-weight: 800; }
.avatar-muted { background: var(--surface-subtle); color: var(--muted); }
.account-actions { display: flex; gap: 6px; }
.small-button, .primary-button, .secondary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 0 12px; border-radius: 9px; font-size: .76rem;
  font-weight: 700; text-decoration: none; transition: .15s ease;
}
.small-button, .secondary-button { border: 1px solid var(--border); background: var(--surface); color: var(--fg); }
.primary-button { border: 1px solid var(--accent); background: var(--accent); color: var(--bg); }
.primary-button:hover { background: var(--accent-hover); }
.primary-button img { width: 16px; }
.icon-action-btn.inverse { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.icon-action-btn.inverse img { filter: brightness(0) invert(1); }
html[data-theme="light"] .icon-action-btn.inverse { background: var(--surface-hover); border-color: var(--border); }
html[data-theme="light"] .icon-action-btn.inverse img { filter: brightness(0); }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.page-header h1 { margin: 0 0 4px; font-size: 1.45rem; line-height: 1.12; letter-spacing: -.035em; }
.eyebrow, .section-kicker { margin: 0 0 4px; color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.page-subtitle { margin: 0; color: var(--muted); font-size: .8rem; }
.hoje-greeting-box h1 { margin: 0 0 4px; font-size: 1.18rem; }
.hoje-greeting-box p { margin: 0; }
.section-header h2 { margin: 0; }
.section-action-link { text-decoration: none; }
.ru-header-row p { margin: 3px 0 0; color: var(--muted); font-size: .74rem; }

.loading-card, .empty-state { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 34px 18px; background: var(--surface); color: var(--muted); text-align: center; }
.feature-card { min-height: 210px; overflow: hidden; position: relative; display: flex; align-items: flex-end; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: #F5F5F7; }
.feature-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.feature-card::after { content: ''; position: absolute; inset: 0; background: rgba(7,7,8,.72); }
.feature-copy { position: relative; z-index: 1; padding: 20px; }
.feature-copy h2 { margin: 8px 0 6px; font-size: 1.3rem; }
.feature-copy > p { margin: 0 0 10px; color: rgba(255,255,255,.84); font-size: .8rem; }
.feature-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; font-size: .72rem; }
.feature-meta span { display: flex; align-items: center; gap: 5px; }
.feature-meta img { width: 14px; filter: brightness(0) invert(1); }
.feature-link { display: inline-flex; padding: 6px 10px; border-radius: 8px; background: var(--accent); color: var(--bg); font-size: .72rem; font-weight: 800; text-decoration: none; }
.feature-empty { min-height: 150px; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.compact-list, .opportunity-grid { display: grid; gap: 8px; }
.opportunity-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.compact-post { display: grid; grid-template-columns: 8px minmax(0,1fr); gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.compact-post:last-child { border-bottom: 0; }
.compact-marker { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--accent); }
.compact-post div { display: grid; gap: 2px; }
.compact-post strong { font-size: .78rem; }
.compact-post small { color: var(--muted); font-size: .68rem; }
.live-rail .compact-post { min-width: 235px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.opportunity-card { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.opportunity-image { width: 100%; aspect-ratio: 16 / 8; border-radius: 8px; object-fit: cover; }
.opportunity-card h3 { margin: 0; font-size: .84rem; }
.opportunity-card > p { margin: 0; color: var(--muted); font-size: .72rem; }
.card-meta, .post-location { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .68rem; }
.card-meta img, .post-location img { width: 14px; }

.segmented-control { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: var(--radius-md); background: var(--surface-subtle); }
.segmented-control button { min-height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: .76rem; font-weight: 700; }
.segmented-control button.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.filter-pills-row button { flex: 0 0 auto; }
.filter-pill img { width: 14px; height: 14px; opacity: .7; }
.filter-pill.active img { filter: brightness(0); opacity: 1; }
.feed-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 32px; color: var(--muted); font-size: .72rem; }
.feed-toolbar p { margin: 0; }
.text-button { border: 0; background: transparent; color: var(--accent); font-size: .72rem; font-weight: 700; }
.feed-list, .specialized-list { display: grid; gap: 12px; }

.post-card { min-width: 0; padding: 0; overflow: hidden; animation: fadeIn .2s ease both; }
#feed .post-card { margin-bottom: 0; }
.post-card-header { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 13px 14px 0; }
.post-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-subtle); color: var(--accent); font-size: .7rem; font-weight: 800; }
.post-identity { min-width: 0; }
.post-identity > div { display: flex; align-items: center; gap: 6px; }
.post-identity strong { font-size: .82rem; }
.post-identity small { display: block; color: var(--muted); font-size: .68rem; }
.verified-badge { padding: 2px 5px; border-radius: 99px; background: var(--accent-subtle); color: var(--accent); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.category-badge { display: inline-flex; width: max-content; max-width: 100%; overflow: hidden; padding: 3px 8px; border-radius: 99px; background: var(--accent-subtle); color: var(--accent); font-size: .65rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.category-badge[data-category="oportunidades"] { background: var(--blue-subtle); color: var(--blue); }
.category-badge[data-category="vendas"] { background: var(--secondary-subtle); color: var(--secondary-hover); }
.category-badge[data-category="avisos"] { background: var(--amber-subtle); color: var(--amber); }
.post-card-body { padding: 12px 14px 10px; }
.post-card-body h2 { margin: 0 0 6px; font-size: .98rem; line-height: 1.3; }
.post-card-body > p:not(.post-location) { margin: 0 0 9px; color: var(--fg); font-size: .82rem; white-space: pre-wrap; }
.post-detail-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; }
.post-detail-row span { padding: 4px 7px; border-radius: 7px; background: var(--surface-subtle); color: var(--fg); font-size: .66rem; font-weight: 700; }
.post-media { overflow: hidden; margin: 12px -14px -10px; max-height: 300px; background: var(--surface-subtle); }
.post-media img { width: 100%; max-height: 300px; object-fit: cover; }
.comment-preview { display: grid; gap: 4px; margin: 0 14px; }
.comment-preview:empty { display: none; }
.comment-preview p { overflow: hidden; margin: 0; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.post-card-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 10px; border-top: 1px solid var(--border); padding: 7px 10px; }
.post-actions { display: flex; gap: 2px; }
.interaction-button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: .68rem; font-weight: 700; }
.interaction-button:hover { background: var(--surface-subtle); color: var(--fg); }
.interaction-button.active { background: var(--accent-subtle); color: var(--accent); }
.interaction-button img { width: 17px; height: 17px; opacity: .75; }
.comment-button { margin-left: auto; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.publish-page-header { width: min(100%, 720px); margin-right: auto; margin-left: auto; }
.social-composer { width: min(100%, 720px); margin: 0 auto; padding: 18px; border-radius: 16px; box-shadow: var(--shadow-sm); }
.composer-main { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; }
.composer-main > .post-avatar { width: 42px; height: 42px; font-size: .78rem; }
.composer-content { min-width: 0; }
.composer-textarea { display: block; width: 100%; min-height: 112px; padding: 8px 0 14px; border: 0; border-bottom: 1px solid var(--border); outline: 0; resize: none; background: transparent; color: var(--fg); font: inherit; font-size: 1.15rem; line-height: 1.45; }
.composer-textarea::placeholder { color: var(--muted); }
.composer-textarea:focus { border-color: var(--accent); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label { display: grid; gap: 5px; color: var(--fg); font-size: .76rem; font-weight: 700; }
.publish-type-fieldset, .typed-fields { min-width: 0; border: 0; padding: 0; }
.publish-type-fieldset { margin: 12px 0 10px; }
.typed-fields { margin: 14px 0 0 54px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-subtle); }
.publish-type-fieldset legend, .typed-fields legend { margin-bottom: 9px; color: var(--fg); font-size: .8rem; font-weight: 800; }
.publish-type-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.publish-type-option { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; transition: .15s ease; }
.publish-type-option:hover { border-color: var(--secondary); color: var(--fg); background: var(--secondary-subtle); }
.publish-type-option.selected { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent); box-shadow: none; }
.publish-type-option input { position: absolute; opacity: 0; pointer-events: none; }
.publish-type-option img { width: 16px; height: 16px; flex: 0 0 auto; opacity: .8; filter: brightness(0) invert(.72); }
.publish-type-option.selected img { filter: brightness(0) saturate(100%) invert(77%) sepia(47%) saturate(706%) hue-rotate(62deg) brightness(99%) contrast(95%); }
html[data-theme="light"] .publish-type-option img { filter: brightness(0); }
html[data-theme="light"] .publish-type-option.selected img { filter: brightness(0) saturate(100%) invert(62%) sepia(77%) saturate(462%) hue-rotate(63deg) brightness(97%) contrast(94%); }
.publish-type-option strong { font-size: .7rem; }
.composer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.composer-category, .composer-location { display: inline-flex; max-width: 100%; align-items: center; gap: 5px; color: var(--accent); }
.composer-category img, .composer-location img { width: 17px; height: 17px; filter: brightness(0) saturate(100%) invert(77%) sepia(47%) saturate(706%) hue-rotate(62deg) brightness(99%) contrast(95%); }
.composer-category .form-select, .composer-location .form-select { width: auto; max-width: 100%; padding: 5px 28px 5px 7px; border: 0; background-color: transparent; color: var(--accent); font-size: .72rem; font-weight: 700; }
.composer-category .form-select:focus, .composer-location .form-select:focus { box-shadow: 0 0 0 2px var(--accent-subtle); }
.composer-image-button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; color: var(--accent); font-size: .72rem; font-weight: 700; cursor: pointer; }
.composer-image-button img { width: 17px; height: 17px; filter: brightness(0) saturate(100%) invert(77%) sepia(47%) saturate(706%) hue-rotate(62deg) brightness(99%) contrast(95%); }
.composer-image-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.composer-image-preview { position: relative; overflow: hidden; margin: 12px 0 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-subtle); }
.composer-image-preview > img { width: 100%; max-height: 360px; object-fit: cover; }
.composer-image-preview button { position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(7,7,8,.78); }
.composer-image-preview button img { width: 17px; height: 17px; filter: brightness(0) invert(1); }
.composer-image-preview figcaption { overflow: hidden; padding: 7px 10px; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.typed-fields[hidden] { display: none; }
.span-2 { grid-column: 1/-1; }
.check-row { display: flex !important; align-items: center; padding: 10px; border-radius: 9px; background: var(--surface-subtle); }
.check-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.check-row span { display: grid; margin-left: 8px; }
.check-row small { color: var(--muted); font-weight: 400; }
.form-errors { min-height: 18px; margin: 10px 0 0 54px; color: var(--red-if); font-size: .72rem; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.composer-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 8px 0 0 54px; padding-top: 10px; border-top: 1px solid var(--border); }
.composer-footer > span { color: var(--muted); font-family: var(--font-mono); font-size: .67rem; }
.composer-footer .primary-button { min-width: 92px; border-radius: 999px; }
.composer-footer .primary-button:disabled { opacity: .55; cursor: wait; }

.job-card { margin: 0; }
.job-card .post-card-footer { margin: 8px -14px -14px; }
.market-grid .post-card { margin: 0; }
.market-grid .post-card-header { grid-template-columns: 32px minmax(0,1fr); }
.market-grid .post-card-header .category-badge { display: none; }
.market-grid .post-card-body h2 { font-size: .88rem; }
.market-grid .post-card-footer { margin-top: auto; }
.market-grid .post-actions .interaction-button:not([data-interaction="interest"]) { display: none; }
.market-grid .comment-button { display: none; }

.profile-layout { display: grid; gap: 12px; }
.profile-summary { display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.profile-avatar { display: grid; place-items: center; width: 60px; height: 60px; border: 2px solid var(--accent); border-radius: 50%; background: var(--accent-subtle); color: var(--accent); font-weight: 800; }
.profile-copy h2 { margin: 0; font-size: 1.05rem; }
.profile-course, .profile-bio { margin: 2px 0 0; color: var(--muted); font-size: .74rem; }
.profile-stats { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.profile-stat { display: grid; justify-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.profile-stat strong { color: var(--accent); font-family: var(--font-mono); }
.profile-stat span { color: var(--muted); font-size: .65rem; text-transform: uppercase; }
.profile-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface-subtle); }
.profile-tabs button { flex: 1; padding: 7px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 700; }
.profile-tabs button.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.profile-posts { display: grid; gap: 7px; margin-top: 10px; }
.profile-post { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.profile-post p { margin: 3px 0; color: var(--muted); font-size: .72rem; }
.profile-post small { color: var(--muted); font-size: .65rem; }
.content-card, .form-card { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }

.inline-empty { margin: 0; padding: 12px; border-radius: 9px; background: var(--surface-subtle); color: var(--muted); font-size: .72rem; text-align: center; }
.error-state { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--red-if); border-radius: var(--radius-md); background: var(--red-subtle); color: var(--red-if); }
.error-copy { color: var(--red-if); }

dialog { width: min(94vw,560px); max-height: 82vh; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgba(15,23,42,.55); }
.dialog-shell { display: grid; grid-template-rows: auto minmax(120px,1fr) auto; max-height: 82vh; }
.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px; border-bottom: 1px solid var(--border); }
.dialog-header h2 { margin: 0; }
.comments-list { overflow-y: auto; padding: 12px 16px; }
.comment-form { padding: 12px 16px 16px; border-top: 1px solid var(--border); }
.comment-form > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.comment-form label { display: block; margin-bottom: 5px; font-size: .72rem; font-weight: 700; }
.comment-form .form-textarea { min-height: 58px; max-height: 150px; }
.comment-form .form-errors { margin-left: 0; }
.comment-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.comment-item > div { min-width: 0; }
.comment-item p { margin: 0; }
.comment-meta { color: var(--muted); font-size: .68rem; }
.comment-body { overflow-wrap: anywhere; margin-top: 4px !important; font-size: .76rem; white-space: pre-wrap; }
.comment-delete { border: 0; background: transparent; color: var(--red-if); font-size: .68rem; }
.toast { position: absolute; z-index: 100; top: 62px; left: 50%; transform: translateX(-50%); padding: 9px 14px; border: 1px solid var(--secondary); border-radius: 99px; background: var(--surface-hover); color: var(--fg); font-size: .76rem; font-weight: 700; box-shadow: var(--shadow-lg); }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.auth-shell { width: min(100%, 960px); min-height: 620px; display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-lg); }
.auth-context { display: flex; flex-direction: column; justify-content: space-between; padding: 40px; border-right: 1px solid var(--border); background: var(--surface-hover); color: var(--fg); }
.auth-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.auth-brand .brand-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border), 0 0 24px rgba(151,26,251,.2); }
.auth-brand img { width: 58px; height: 58px; object-fit: contain; }
.auth-brand > span:last-child { display: grid; line-height: 1.2; }
.auth-brand strong { font-size: 1rem; }
.auth-brand small { color: inherit; font-size: .7rem; opacity: .72; }
.auth-context-copy .eyebrow { color: var(--secondary-hover); }
.auth-context-copy h1 { max-width: 9ch; margin: 8px 0 16px; font-size: 3rem; line-height: .98; letter-spacing: -.055em; }
.auth-context-copy > p:last-child { max-width: 34ch; color: var(--text-muted, var(--muted)); font-size: .95rem; }
.auth-trust { margin: 0; color: var(--muted); font-size: .72rem; }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: 48px; }
.auth-brand-mobile { display: none; margin-bottom: 36px; color: var(--fg); }
.auth-brand-mobile small { color: var(--muted); }
.primary-action { border: 0; border-radius: 12px; background: var(--accent); color: var(--bg); font-weight: 800; }
.primary-action:hover { background: var(--accent-hover); }
.flash-list { display: grid; gap: 8px; margin-bottom: 20px; }
.flash { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: .78rem; font-weight: 700; }
.flash-error { background: var(--red-subtle); color: var(--red-if); }
.flash-success { background: var(--accent-subtle); color: var(--accent-hover); }

.auth-panel input, .admin-page input { border-color: var(--border) !important; background: var(--bg) !important; color: var(--fg) !important; }
.auth-panel input:focus, .admin-page input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-subtle) !important; }
.auth-panel .text-slate-500, .admin-page .text-slate-500 { color: var(--muted) !important; }
.auth-panel a { color: var(--accent-hover) !important; }

.admin-page { display: block; min-height: 100vh; padding: 0; background: var(--bg) !important; color: var(--fg); }
.admin-page main { margin-inline: auto; padding-inline: 24px; }
.admin-page .bg-white { border: 1px solid var(--border); background: var(--surface) !important; }
.admin-page .divide-y > :not([hidden]) ~ :not([hidden]), .admin-page .border-t { border-color: var(--border) !important; }
.admin-page .site-header { background: var(--surface); }
.admin-page .brand img { width: 52px; height: 52px; object-fit: contain; }

@media (min-width: 800px) {
  body { display: block; padding: 0; background: var(--bg); }
  .app-viewport { width: 100%; max-width: none; min-height: 100vh; border: 0; border-radius: 0; background: var(--bg); box-shadow: none; }
  .app-scroll { min-height: 0; }
  .desktop-nav-bar { display: flex; gap: 4px; }
  .mobile-bottom-nav { display: none; }
  .header-account { display: grid; }
  #mobile-account-actions { display: none; }
  .tab-view-content { padding: 22px 28px; }
  [data-view="feed"] { width: min(100%,1080px); margin-inline: auto; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .market-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 600px) {
  body { padding: 0; background: var(--bg); }
  .app-viewport { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .dashboard-grid, .opportunity-grid, .form-grid { grid-template-columns: 1fr; }
  .social-composer { padding: 14px; }
  .composer-main { grid-template-columns: 38px minmax(0,1fr); gap: 10px; }
  .composer-main > .post-avatar { width: 38px; height: 38px; }
  .composer-textarea { min-height: 104px; font-size: 1.05rem; }
  .typed-fields, .form-errors, .composer-footer { margin-left: 0; }
  .publish-type-option { padding-inline: 9px; }
  .span-2 { grid-column: 1; }
  .page-header { align-items: flex-start; }
  .page-header h1 { font-size: 1.3rem; }
  .market-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .post-actions { gap: 0; }
  .interaction-button { padding-inline: 6px; }
  .comment-form > div { grid-template-columns: 1fr; }
  .comment-form .primary-button { width: 100%; }
  dialog { width: 100%; max-width: none; max-height: 88vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
}

@media (max-width: 720px) {
  .auth-page { padding: 0; background: var(--surface); }
  .auth-shell { min-height: 100vh; display: block; border: 0; border-radius: 0; box-shadow: none; }
  .auth-context { display: none; }
  .auth-panel { min-height: 100vh; justify-content: center; padding: 32px 22px; }
  .auth-brand-mobile { display: flex; }
}