:root{
    --primary:#00308f;
    --accent:#eaf2ff;
    --ink:#141922;
    --muted:#667084;
    --bg:#f6f7fb;
    --card:#ffffff;
    --border:#e6e8ee;
    --shadow: 0 8px 24px rgba(10,20,40,.08);
    --radius:16px;
    --radius2:22px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Aptos","Aptos Display","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
    line-height:1.4;
  }
  
  /* Existing Synergos header block styling (matches your snippet) */
  .synergos-header{
    background-color:#f8f8ff;
    text-align:left;
    padding:14px 18px;
    margin:0;
    border-bottom:1px solid var(--border);
  }
  .synergos-header a{display:inline-block}
  .synergos-tagline{
    color:var(--primary);
    float:right;
    font-size:10px;
    line-height:1.2;
  }
  @media (max-width:700px){
    .synergos-tagline{float:none; display:block; margin-top:6px;}
  }
  
  .app{min-height:calc(100% - 1px); display:flex; flex-direction:column;}
  
  .topbar{
    position:sticky; top:0; z-index:10;
    background:rgba(246,247,251,.88);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--border);
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }
  
  .brand{display:flex; gap:12px; align-items:center;}
  .brand-title{font-size:16px; font-weight:900}
  .brand-sub{font-size:12px; color:var(--muted)}
  
  .controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
  
  .search input{
    width:min(340px, 72vw);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 12px;
    outline:none;
    background:#fff;
  }
  .search input:focus{border-color:rgba(0,48,143,.35); box-shadow:0 0 0 4px rgba(0,48,143,.10);}
  
  .toggle{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); user-select:none}
  .toggle input{transform: translateY(1px);}
  
  .toggle.env select{
    border:1px solid var(--border);
    border-radius:10px;
    padding:8px 10px;
    background:#fff;
    font:inherit;
  }
  .env-label{font-weight:900; color:var(--muted); margin-right:6px;}
  
  .btn{
    border:1px solid var(--border);
    background:#fff;
    border-radius:12px;
    padding:10px 12px;
    font-weight:800;
    cursor:pointer;
  }
  .btn:hover{box-shadow:0 10px 22px rgba(10,20,40,.08)}
  .btn.primary{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
  }
  .btn.danger{
    background:#fff;
    border-color:rgba(180,20,20,.35);
    color:#8d1b1b;
  }
  .icon-btn{
    border:1px solid var(--border);
    background:#fff;
    border-radius:12px;
    width:38px;height:38px;
    cursor:pointer;
  }
  
  .menu{position:relative}
  .menu-panel{
    position:absolute; right:0; top:46px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow: var(--shadow);
    padding:8px;
    min-width:200px;
  }
  .menu-item{
    width:100%;
    padding:10px 10px;
    border-radius:12px;
    border:0;
    background:#fff;
    cursor:pointer;
    text-align:left;
    font-weight:800;
  }
  .menu-item:hover{background:rgba(0,0,0,.03)}
  .menu-item.danger{color:#8d1b1b}
  .menu-item.filelike{display:flex; justify-content:space-between; align-items:center; gap:10px}
  
  .main{
    width:min(1150px, calc(100% - 30px));
    margin:16px auto 40px;
  }
  
  .status{
    color:var(--muted);
    font-size:13px;
    margin:10px 2px 16px;
  }
  
  .categories{display:flex; flex-direction:column; gap:16px;}
  
  .category{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius2);
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .cat-header{
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid var(--border);
    background:linear-gradient(180deg, rgba(234,242,255,.60), rgba(255,255,255,.60));
  }
  .cat-title{display:flex; flex-direction:column; gap:2px;}
  .cat-title .h{font-weight:950; font-size:15px;}
  .cat-title .s{color:var(--muted); font-size:12px;}
  
  .cat-actions{display:flex; align-items:center; gap:10px;}
  .pill{
    border:1px solid var(--border);
    background:#fff;
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    color:var(--muted);
    font-weight:800;
  }
  .collapse{
    border:1px solid var(--border);
    background:#fff;
    border-radius:999px;
    padding:6px 10px;
    cursor:pointer;
    font-weight:900;
  }
  
  .grid{
    padding:14px 14px 18px;
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap:12px;
  }
  
  .tile{
    border:1px solid var(--border);
    background:#fff;
    border-radius:18px;
    padding:12px;
    display:flex;
    gap:12px;
    align-items:flex-start;
    cursor:grab;
    user-select:none;
    position:relative;
  }
  .tile:hover{box-shadow:0 10px 22px rgba(10,20,40,.08)}
  .tile:active{cursor:grabbing}
  .tile.dragging{opacity:.6}
  
  .tile .icon{
    width:44px;height:44px;border-radius:14px;
    background:rgba(0,48,143,.06);
    display:flex; align-items:center; justify-content:center;
    flex:0 0 auto;
    border:1px solid rgba(0,48,143,.10);
  }
  .tile .icon svg{width:22px;height:22px}
  
  .tile .body{min-width:0}
  .tile .name{font-weight:950; font-size:14px; margin:1px 0 2px}
  .tile .desc{color:var(--muted); font-size:12px; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  
  .badges{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
  .badge{
    font-size:11px;
    font-weight:900;
    color:var(--primary);
    border:1px solid rgba(0,48,143,.18);
    background:rgba(234,242,255,.65);
    padding:4px 8px;
    border-radius:999px;
  }
  .badge.gray{
    color:var(--muted);
    border-color:var(--border);
    background:#fff;
  }
  
  .kebab{
    position:absolute; top:8px; right:8px;
    border:1px solid var(--border);
    background:#fff;
    border-radius:12px;
    width:34px;height:34px;
    cursor:pointer;
    font-weight:900;
  }
  
  .footer{
    margin-top:auto;
    border-top:1px solid var(--border);
    background:#fff;
    padding:12px 18px;
    color:var(--muted);
    font-size:12px;
  }
  .dot{
    display:inline-block;
    width:8px;height:8px;border-radius:99px;
    background:rgba(0,48,143,.55);
    margin-right:8px;
  }
  code{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
  
  /* Modal */
  .backdrop{
    position:fixed; inset:0;
    background:rgba(20,25,34,.45);
    z-index:50;
  }
  .modal{
    position:fixed;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:min(740px, calc(100% - 24px));
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow: var(--shadow);
    z-index:60;
  }
  .modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 14px 10px;
    border-bottom:1px solid var(--border);
  }
  .modal-title{font-weight:950; font-size:16px}
  .modal-body{padding:14px}
  .field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
  .field label{font-weight:900; font-size:12px; color:var(--muted)}
  .field input,.field select,.field textarea{
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 12px;
    outline:none;
    font:inherit;
  }
  .field input:focus,.field select:focus,.field textarea:focus{
    border-color:rgba(0,48,143,.35);
    box-shadow:0 0 0 4px rgba(0,48,143,.10);
  }
  .grid2{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
  .hint{font-size:12px; color:var(--muted)}
  .modal-actions{display:flex; align-items:center; gap:10px; padding-top:10px;}
  .spacer{flex:1}
  @media (max-width:700px){
    .grid2{grid-template-columns:1fr}
    .controls{justify-content:flex-start}
  }
/* Custom UI improvements */
:root {
  --accent: #ffbf47; /* soft accent color to complement Synergos blue */
}

.tile .icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.tile .icon svg {
  width: 20px;
  height: 20px;
}

.tile {
  padding: 8px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}