:root {
  --color-bg: #050915;
  --color-surface: #0b1020;
  --color-panel: #121a33;
  --color-surface-alt: #1b264b;
  --color-border: rgba(255,255,255,.08);
  --color-border-strong: rgba(255,255,255,.16);
  --color-text: #e9ecf5;
  --color-muted: #9aa3b2;
  --color-primary: #ff6a3d;
  --color-primary-rgb: 255,106,61;
  --color-secondary: #7c8bff;
  --color-secondary-rgb: 124,139,255;
  --color-success: #21d17d;
  --color-success-rgb: 33,209,125;
  --color-info: #9ed0ff;
  --color-info-rgb: 158,208,255;
  --color-warning: #ffdf6b;
  --color-warning-rgb: 255,223,107;
  --color-danger: #ff5a5a;
  --color-danger-rgb: 255,90,90;
  --shadow-soft: 0 18px 45px rgba(5,9,21,.55);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --transition-fast: 150ms ease;
  --transition-medium: 220ms ease;
  --bg: var(--color-bg);
  --panel: var(--color-panel);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --accent: var(--color-primary);
}

*{ box-sizing:border-box; }
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--text); }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.25); position:sticky; top:0; z-index: 100; }
.brand{ font-weight:700; letter-spacing:.3px; }
.pause-banner{ display:none; align-items:center; justify-content:center; gap:10px; padding:10px 16px; background:rgba(220,70,70,.2); border-bottom:1px solid rgba(255,90,90,.45); color:#ffdede; font-weight:600; text-transform:uppercase; letter-spacing:1px; position:sticky; top:61px; z-index:99; animation: pausePulse 2s infinite; }
.pause-banner.is-active{ display:flex; }
.pause-alert-label{ font-size:13px; }
.pause-alert-text{ font-size:12px; text-transform:none; letter-spacing:0; }
@keyframes pausePulse{ 0%{ box-shadow:0 0 0 0 rgba(255,90,90,.4);} 70%{ box-shadow:0 0 0 6px rgba(255,90,90,0);} 100%{ box-shadow:0 0 0 0 rgba(255,90,90,0);} }
body.pause-active .topbar{ border-bottom-color:rgba(255,90,90,.45); }
.nav{ display:flex; gap:8px; flex-wrap: wrap; }
.tab{
  background:rgba(255,255,255,.02);
  color:var(--muted);
  border:1px solid var(--color-border);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.tab:hover{
  color:var(--text);
  border-color:var(--color-border-strong);
  background:rgba(255,255,255,.05);
  transform:translateY(-1px);
}

.tab.active{
  color:var(--text);
  border-color:rgba(var(--color-primary-rgb),.65);
  background:rgba(var(--color-primary-rgb),.15);
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}

.container{ padding:18px; max-width:1100px; margin:0 auto; }
.card{
  background:var(--panel);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  box-shadow:0 12px 32px rgba(5,9,21,.35);
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.card.card-interactive{
  cursor:pointer;
}
.card.card-interactive:hover{
  border-color:var(--color-border-strong);
  box-shadow:var(--shadow-soft);
  transform:translateY(-2px);
}

.pause-control{ margin-top:12px; padding:12px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); border-radius:12px; display:flex; flex-direction:column; gap:8px; }
.pause-status-line{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.pause-control .btn{ width:100%; }
.pause-status-pill .pill{ font-size:12px; }
.pause-note{ font-size:12px; color:var(--muted); }
.row{ display:flex; gap:12px; flex-wrap:wrap; }
.col{ flex:1 1 260px; }
.top-split{ display:grid; grid-template-columns:minmax(0,4fr) minmax(220px,1fr); gap:12px; align-items:start; }
.top-split .col{ min-width:0; }
.top-split-main,
.top-split-side{ flex:initial; min-width:0; }
.h1{ font-size:18px; font-weight:700; margin:0 0 10px; }
.small{ color:var(--muted); font-size:12px; }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:8px 6px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; font-size:13px; }
.pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 10px;
  border-radius:var(--radius-pill);
  font-size:12px;
  border:1px solid var(--color-border);
  color:var(--muted);
  background:rgba(255,255,255,.03);
  font-weight:600;
  transition:border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.pill-ok{
  border-color:rgba(var(--color-success-rgb),.45);
  background:rgba(var(--color-success-rgb),.12);
  color:#c6f8df;
}
.pill-warn{
  border-color:rgba(var(--color-warning-rgb),.5);
  background:rgba(var(--color-warning-rgb),.15);
  color:#fff4c4;
}
.pill-bad{
  border-color:rgba(var(--color-danger-rgb),.45);
  background:rgba(var(--color-danger-rgb),.12);
  color:#ffd0d0;
}
.pill-info{
  border-color:rgba(var(--color-info-rgb),.45);
  background:rgba(var(--color-info-rgb),.12);
  color:#d6ecff;
}

.checkbox-field{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:border-color var(--transition-fast), background var(--transition-fast);
  cursor:pointer;
}
.checkbox-field:hover{
  border-color:var(--color-border);
  background:rgba(255,255,255,.03);
}
.checkbox-input{
  appearance:none;
  width:16px;
  height:16px;
  border:1px solid var(--color-border-strong);
  border-radius:4px;
  background:rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  margin:0;
  cursor:pointer;
  transition:border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.checkbox-input::after{
  content:'';
  width:8px;
  height:8px;
  border-radius:2px;
  background:transparent;
  transform:scale(0.5);
  transition:transform var(--transition-fast), background var(--transition-fast);
}
.checkbox-input:checked{
  border-color:rgba(var(--color-primary-rgb),.8);
  background:rgba(var(--color-primary-rgb),.2);
}
.checkbox-input:checked::after{
  background:rgba(var(--color-primary-rgb),.95);
  transform:scale(1);
}
.checkbox-input:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),.25);
}

a{ color:#9ed0ff; }

/* Tasks board */
.board{ display:flex; gap:12px; align-items:flex-start; overflow:auto; padding-bottom:6px; }
.tasks-board-wrap{ overflow-x: auto; padding-bottom: 12px; }
.column{ flex:1 1 240px; min-width:240px; max-height: 68vh; display: flex; flex-direction: column; }
.colhead{
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
  padding: 12px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 8px;
  border-bottom: 1px solid var(--color-border);
}
.coltitle{ font-weight:700; }
.count{ color:var(--muted); font-size:12px; }
.drop{ background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.12); border-radius:14px; padding:10px; min-height:90px; overflow-y: auto; flex: 1; }
.task{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  margin:0 0 var(--space-3);
  cursor:grab;
  border-left-width:4px;
  position:relative;
  transition:transform var(--transition-fast), opacity var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.task:hover{
  border-color:rgba(var(--color-primary-rgb),.4);
  box-shadow:0 12px 24px rgba(0,0,0,.35);
}

.task:active{ cursor:grabbing; }
.task.moving { opacity: 0.5; transform: scale(0.95); }
.task .t{ font-weight:650; font-size:14px; margin-right: 40px; }
.task .m{ color:var(--muted); font-size:12px; margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; }

/* Task Move Buttons */
.task-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
}

.btn-move{
  background:rgba(255,255,255,.08);
  border:1px solid var(--color-border);
  color:var(--text);
  border-radius:var(--radius-sm);
  width:24px;
  height:24px;
  padding:0;
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  z-index:2;
}
.btn-move:hover:not(:disabled){
  background:rgba(var(--color-primary-rgb),.25);
  border-color:rgba(var(--color-primary-rgb),.65);
  transform:translateY(-1px);
}
.btn-move:disabled{
  opacity:.25;
  cursor:not-allowed;
}

/* Task Priority Colors */
.task.p0, .task.p1 { border-left-color: #ff5a5a; } /* Red */
.task.p2 { border-left-color: #ffaa00; } /* Orange-Yellow */
.task.p3 { border-left-color: #ffdf00; } /* Yellow */
.task.p4, .task.p5 { border-left-color: #21d17d; } /* Green */

/* Task Assignee Pills */
.pill.assignee-roger { border-color: rgba(255, 106, 61, 0.4); color: #ffb39c; } /* Orange */
.pill.assignee-anne { border-color: rgba(187, 134, 252, 0.4); color: #d7b7fd; } /* Purple */

.form{ display:flex; gap:8px; flex-wrap:wrap; }
.input,
.select,
.textarea,
select,
textarea{
  background:rgba(255,255,255,.03);
  border:1px solid var(--color-border);
  color:var(--text);
  border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-3);
  font:inherit;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
select{
  appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>');
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:28px;
}
.input:focus,
.select:focus,
.textarea:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:rgba(var(--color-primary-rgb),.65);
  box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),.2);
  background:rgba(255,255,255,.06);
}
.textarea,
textarea{
  width:100%;
  min-height:70px;
  resize:vertical;
}

/* Compact first row in New Task form */
.newtask-toprow .input,
.newtask-toprow select,
.newtask-toprow .select{
  padding:6px 28px 6px 10px;
  min-height:38px;
  font-size:14px;
}

.newtask-toprow .input{
  padding-right: 10px;
}

.newtask-toprow select{
  flex:0 0 auto;
}

.select-compact{
  padding:4px 24px 4px 8px;
  font-size:12px;
  min-height:0;
}

.btn{
  background:rgba(255,255,255,.04);
  border:1px solid var(--color-border);
  color:var(--text);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);
  cursor:pointer;
  font-weight:600;
  transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.btn:focus-visible{
  outline:none;
  border-color:rgba(var(--color-primary-rgb),.65);
  box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),.25);
}
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}
.btn-primary{
  background:rgba(var(--color-primary-rgb),.18);
  border-color:rgba(var(--color-primary-rgb),.65);
}
.btn-primary:hover:not(:disabled){
  background:rgba(var(--color-primary-rgb),.28);
  border-color:rgba(var(--color-primary-rgb),.85);
}
.btn-secondary{
  background:rgba(255,255,255,.05);
  border-color:var(--color-border-strong);
  color:var(--muted);
}
.btn-secondary:hover:not(:disabled){
  color:var(--text);
  background:rgba(255,255,255,.08);
}
.btn-success{
  background:rgba(var(--color-success-rgb),.18);
  border-color:rgba(var(--color-success-rgb),.6);
}
.btn-danger{
  background:rgba(var(--color-danger-rgb),.18);
  border-color:rgba(var(--color-danger-rgb),.6);
}
.btn-info{
  background:rgba(var(--color-info-rgb),.18);
  border-color:rgba(var(--color-info-rgb),.6);
}
.btn-sm{
  font-size:12px;
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-sm);
}


/* Ideas */
.ideas-toolbar{ align-items:center; justify-content:space-between; margin-bottom:12px; }
.ideas-list{ display:flex; flex-direction:column; gap:12px; }
.idea-card{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  background:var(--panel);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
}
.idea-head{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.idea-title{ font-size:16px; font-weight:650; }
.idea-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }
.idea-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.idea-content{ border-radius:var(--radius-md); padding:12px; background:rgba(0,0,0,.18); font-size:14px; line-height:1.5; }
.idea-card.is-expanded{ border-color:rgba(var(--color-primary-rgb),.5); box-shadow:0 0 0 1px rgba(var(--color-primary-rgb),.35) inset; }
.idea-card.is-collapsed .idea-content{ display:none; }
.idea-toggle{ min-width:76px; }
.idea-toggle[aria-expanded="true"]{ box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),.3); }

.markdown p{ margin:0 0 8px; }
.markdown p:last-child{ margin-bottom:0; }
.markdown pre{ background:rgba(0,0,0,.35); padding:10px; border-radius:10px; overflow:auto; }
.markdown code{ background:rgba(255,255,255,.08); padding:2px 4px; border-radius:6px; font-family:'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; font-size:13px; }
.markdown ul{ margin:0; padding-left:20px; }
.markdown li{ margin:4px 0; }
.markdown blockquote{ border-left:3px solid rgba(255,255,255,.2); margin:6px 0; padding-left:10px; color:var(--muted); font-style:italic; }

/* Cron timeline */
.cron-timeline{
  position:relative;
  margin-left:8px;
  padding-left:16px;
  border-left:2px solid rgba(255,255,255,.14);
}

.cron-timeline-item{
  position:relative;
  padding:0 0 12px 0;
}

.cron-dot{
  position:absolute;
  left:-22px;
  top:6px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--panel);
}

.cron-dot.is-ok{
  background:rgb(var(--color-success-rgb));
}

.cron-dot.is-bad{
  background:rgb(var(--color-danger-rgb));
}

.cron-timeline-content{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:10px;
}

.cron-timeline-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}

.cron-title{
  font-weight:650;
  font-size:14px;
}

.cron-timeline-item.is-disabled{
  opacity:.7;
}

.bolt{
  display:inline-block;
  color:#ffdf00;
  text-shadow:0 0 8px rgba(255,223,0,0.4);
  margin-left:4px;
  font-size:12px;
}

/* Docs screen */
.docs-layout{
  display:grid;
  grid-template-columns:minmax(250px, 320px) minmax(0, 1fr);
  gap:12px;
}

.docs-file-list{
  max-height:65vh;
  overflow:auto;
  display:flex;
  flex-direction:column; gap:8px; }
.docs-file-item{ text-align:left; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-md); padding:var(--space-2); color:var(--text); cursor:pointer; transition:border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); }
.docs-file-item:hover{ border-color:rgba(var(--color-primary-rgb),.5); background:rgba(var(--color-primary-rgb),.12); transform:translateY(-1px); }
.docs-file-name{ font-weight:600; font-size:13px; margin-bottom:2px; }
.docs-content{ margin:0; min-height:52vh; max-height:70vh; overflow:auto; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px; font-size:13px; line-height:1.4; white-space:pre-wrap; }

/* Tasks board layout improvements */
.tasks-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 12px; }

/* Compact mode */
.board.is-compact .task { padding: 6px 8px; margin-bottom: 6px; }
.board.is-compact .task .t { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.board.is-compact .task .m { margin-top: 4px; }
.board.is-compact .pill { padding: 1px 6px; font-size: 11px; }
.board.is-compact .task-controls { top: 4px; right: 4px; }
.board.is-compact .btn-move { width: 18px; height: 18px; font-size: 12px; }

/* Team screen */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 12px; }
.team-card { display: flex; flex-direction: column; gap: var(--space-2); }
.team-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.team-role { font-size: 18px; font-weight: 700; }
.team-doc-links { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.team-doc-link { display: inline-flex; align-items: center; gap: 6px; }
.team-doc-link:hover { transform: translateY(-1px); }
.team-doc-preview { margin-top: 16px; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 10px; max-height: 60vh; overflow-y: auto; font-size: 14px; line-height: 1.5; }

.swarm-card { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.swarm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.swarm-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.swarm-status-block { display: flex; flex-direction: column; gap: 12px; }
.swarm-section { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px; }
.swarm-section + .swarm-section { margin-top: 12px; }
.swarm-section-head { font-weight: 600; margin-bottom: 8px; }
.swarm-list { display: flex; flex-direction: column; gap: 10px; }
.swarm-row { border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px; background: rgba(0,0,0,0.2); display: flex; flex-direction: column; gap: 6px; }
.swarm-row-main { display: flex; flex-direction: column; gap: 4px; }
.swarm-name { font-weight: 650; font-size: 15px; }
.swarm-row-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.swarm-meta-chip { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.05); }
.swarm-empty { font-size: 12px; color: var(--muted); padding: 10px; border-radius: 10px; border: 1px dashed rgba(255,255,255,0.15); background: rgba(0,0,0,0.2); }

/* Projects screen */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 16px; margin-top: 12px; }
.project-card { background: var(--panel); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.project-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.project-title { font-size: 18px; font-weight: 700; }
.project-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); align-items: center; }
.project-tasks { display: flex; flex-direction: column; gap: 6px; }
.project-task-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: rgba(255,255,255,0.03); border-radius: 6px; }
.project-task-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Responsiveness fixes for mobile phones */
@media (max-width: 600px) {
  .topbar {
    flex-direction: column;
    gap: var(--space-3);
    padding: 12px;
    align-items: flex-start;
  }

  .nav {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; /* Keep tabs in one row for horizontal scroll */
  }

  .nav::-webkit-scrollbar {
    display: none; /* Hide scrollbar for cleaner look on mobile */
  }

  .tab {
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 13px;
    flex-shrink: 0;
  }

  .container {
    padding: 12px;
  }

  .h1 {
    font-size: 16px;
  }

  /* Tasks Board mobile optimization */
  .board {
    gap: 8px;
  }

  .column {
    min-width: 85vw; /* Almost full width on mobile */
    max-height: none; /* Let the body scroll handle it */
  }

  .drop {
    min-height: 50px;
  }

  .task .t {
    font-size: 13px;
    margin-right: 30px;
  }

  .task-controls {
    top: 4px;
    right: 4px;
  }

  /* Cards responsiveness */
  .card {
    padding: 12px;
  }

  /* Swarm and Team cards */
  .team-grid, .projects-grid {
    grid-template-columns: 1fr !important;
  }

  .project-card {
    padding: 12px;
  }

  /* Form elements */
  .newtask-toprow {
    flex-direction: column;
    align-items: stretch !important;
  }

  .newtask-toprow .input, 
  .newtask-toprow select {
    width: 100%;
  }
}

@media (max-width: 900px){
  .top-split{ grid-template-columns:1fr; }
  .docs-layout{ grid-template-columns:1fr; }
  .projects-grid { grid-template-columns: 1fr; }
}